/* ============================================================================
   JOGO Fuel v2: JOGO's v4 look (css/v4.css) in ember, on for everyone since Nov 9 2026.
   Loaded by the head script in build.mjs (LOOK_JS) unless this device turned it off
   (localStorage fuel:look = 'off', the Me switch or ?look=off), and only
   on the app's own pages (app, me, account) and the landing (home). Keyed on html[data-v4="dark"|"light"],
   which follows the phone's theme. Off, nobody downloads this file.

   Started from the v4 simulation's Fuel layer (Documents/JOGA/v4ui/simulation/
   fuel-v4-sim.css) and the mock-ups 09 Fuel Today / 10 Fuel Week. Section 1 is the
   token set; the rest maps fuel.css selectors onto it. Nothing here hides a feature.
   ========================================================================= */

/* ------------------------------------------------------------ 0. fonts
   Plus Jakarta Sans. 'V4 Display' is one face at a fixed 500, so the many
   rules asking for "display 900" come out medium instead of heavy; 'V4 Sans'
   is the variable file with its range capped at 600, so 700 / 800 / 900 asks
   top out at semibold (JOGO v4's lesson: heavy weights leaked through). */
@font-face{font-family:'V4 Display';font-style:normal;font-weight:500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'V4 Display';font-style:normal;font-weight:500;font-display:swap;
  src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'V4 Sans';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'V4 Sans';font-style:normal;font-weight:200 600;font-display:swap;
  src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ------------------------------------------------------------ 1. tokens */
html[data-v4]{
  --v-font:'V4 Sans','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --v-o:#FF7A1A;
  --v-o-grad:linear-gradient(160deg,#FFA15C 0%,#FF7A1A 48%,#E25F00 100%);
  --v-o-glow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px -8px rgba(226,95,0,.7);
  --v-on-o:#141414;
  --v-r-card:28px; --v-r-tile:24px; --v-r-row:20px;
  /* the dark block (Me card, check-in): the same in both themes */
  --v-block:linear-gradient(180deg,#2A2A2C 0%,#151516 100%);
  --v-block-sh:inset 0 1px 0 rgba(255,255,255,.09),0 22px 40px -12px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.18);
  --v-bar:linear-gradient(180deg,#2A2A2C 0%,#161617 100%);
}
html[data-v4="dark"]{
  --v-bg:#0E0D0C;
  --v-glow:radial-gradient(110% 60% at 82% -8%,rgba(255,122,26,.30) 0%,rgba(255,100,20,.10) 40%,rgba(14,13,12,0) 70%),
           radial-gradient(70% 40% at 0% 4%,rgba(255,150,60,.08) 0%,rgba(14,13,12,0) 70%);
  --v-card:linear-gradient(180deg,#201F1E 0%,#1A1918 100%);
  --v-card-sh:inset 0 1px 0 rgba(255,255,255,.06),0 18px 40px -20px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.35);
  --v-sheet:linear-gradient(180deg,#232222 0%,#171615 100%);
  --v-glass:rgba(255,255,255,.08); --v-glass-line:rgba(255,255,255,.09);
  --v-glass-sh:inset 0 1px 0 rgba(255,255,255,.10),0 8px 18px -10px rgba(0,0,0,.6);
  --v-field:rgba(255,255,255,.06); --v-field-sh:inset 0 2px 6px rgba(0,0,0,.22),inset 0 -1px 0 rgba(255,255,255,.04);
  --v-chip-on:#F5F3EF; --v-chip-on-ink:#141414;
  --v-line-hi:rgba(255,255,255,.18);
  --v-overlay:rgba(6,6,6,.62);
  /* fuel.css tokens (!important beats its :root and its dark @media) */
  --bg:#0E0D0C!important; --s1:#1D1C1B!important; --s2:#2A2928!important; --line:rgba(255,255,255,.08)!important;
  --ink:#F5F3EF!important; --ink2:#BDBAB4!important; --muted:#A3A09A!important;
  --ember:#FF7A1A!important; --ember-ink:#FF9A4D!important; --on-ember:#141414!important;
  --prot:#5BD68E!important; --carb:#8FA6E6!important; --fat:#B79CF5!important;
  color-scheme:dark;
}
html[data-v4="light"]{
  --v-bg:#E8E6E1;
  --v-glow:radial-gradient(120% 60% at 85% -6%,rgba(255,150,70,.85) 0%,rgba(255,122,26,.42) 30%,rgba(255,150,60,.14) 52%,rgba(232,230,225,0) 76%),
           radial-gradient(80% 40% at 6% 10%,rgba(255,190,140,.45) 0%,rgba(232,230,225,0) 70%);
  --v-card:linear-gradient(180deg,#FFFFFF 0%,#F8F7F4 100%);
  --v-card-sh:inset 0 1px 0 #FFFFFF,0 16px 32px -18px rgba(90,40,0,.30),0 2px 6px rgba(90,40,0,.06);
  --v-sheet:linear-gradient(180deg,#FFFFFF 0%,#F6F5F2 100%);
  --v-glass:rgba(255,255,255,.62); --v-glass-line:rgba(255,255,255,.78);
  --v-glass-sh:inset 0 1px 0 rgba(255,255,255,.85),0 8px 18px -10px rgba(90,40,0,.3);
  --v-field:rgba(20,20,20,.04); --v-field-sh:inset 0 2px 6px rgba(90,40,0,.10),inset 0 -1px 0 rgba(255,255,255,.9);
  --v-chip-on:#141414; --v-chip-on-ink:#FFFFFF;
  --v-line-hi:rgba(20,20,20,.2);
  --v-overlay:rgba(30,22,14,.40);
  --bg:#E8E6E1!important; --s1:#FFFFFF!important; --s2:#F1F0EC!important; --line:rgba(20,20,20,.08)!important;
  --ink:#141414!important; --ink2:#4A4A4E!important; --muted:#5F5F64!important;
  /* orange text on the light ground: a deep burnt orange that keeps 4.5:1 on white and on the ground */
  --ember:#FF7A1A!important; --ember-ink:#A33F00!important; --on-ember:#141414!important;
  --prot:#0A8A4E!important; --carb:#3F5BA8!important; --fat:#6E4FC4!important;
  color-scheme:light;
}
html[data-v4]{--display:'V4 Display','Plus Jakarta Sans',sans-serif!important;--body:var(--v-font)!important;--mono:var(--v-font)!important;--num:var(--v-font)!important;--r:var(--v-r-card)!important;}
html[data-v4] .app-page{--body:var(--v-font)!important;--num:var(--v-font)!important;}

/* ------------------------------------------------------------ 2. page */
html[data-v4]{background:var(--v-glow),var(--v-bg)!important;background-repeat:no-repeat!important;background-size:100% 640px,auto!important;}
html[data-v4] body{background:transparent!important;font-family:var(--v-font);font-synthesis-weight:none;-webkit-font-smoothing:antialiased;}
html[data-v4] body :is(h1,h2,h3,h4,p,span,a,div,b,strong,small,label,li,button,input,select,textarea,em,summary,time,td,th){text-transform:none!important;letter-spacing:normal!important;}
html[data-v4] :is(input,button,select,textarea){font-family:var(--v-font);}

/* ------------------------------------------------------------ 3. type */
html[data-v4] :is(h1,h2,h3){font-family:var(--v-font)!important;text-wrap:balance;}
html[data-v4] h1{font-weight:300!important;letter-spacing:-1px!important;line-height:1.02!important;}
html[data-v4] h2{font-weight:400!important;letter-spacing:-.5px!important;line-height:1.1!important;}
html[data-v4] h3{font-weight:500!important;letter-spacing:-.2px!important;line-height:1.2!important;}
html[data-v4] h4{font-family:var(--v-font)!important;font-weight:500!important;}
html[data-v4] .eyebrow{font:500 13px/1.3 var(--v-font)!important;color:var(--ink2)!important;}
html[data-v4] .td-rl{font:500 12.5px var(--v-font)!important;color:var(--ink2)!important;}
html[data-v4] .td-greet h1{font-size:clamp(36px,10vw,48px)!important;line-height:1!important;letter-spacing:-1.4px!important;}
html[data-v4] .td-greet h1 em{color:inherit!important;}
html[data-v4] .td-hi{font:500 13px var(--v-font)!important;color:var(--ink2)!important;}
html[data-v4] .app-page .me-head h1{font-size:30px!important;letter-spacing:-.8px!important;}
html[data-v4] .td-head h2{font-size:26px!important;}
html[data-v4] .co-th{font-size:24px!important;}
/* big numbers: light 300, as on JOGO v4 */
html[data-v4] :is(.stat b,.td-kch>p:first-child b,.td-water b,.dy-kg b,.dy-st b,.tl-rest b,.co-today b,.td-meal li>span){font-family:var(--v-font)!important;font-weight:300!important;letter-spacing:-.5px!important;}
html[data-v4] .td-hero .td-kch>p:first-child b{font-weight:300!important;letter-spacing:-3px!important;font-size:clamp(64px,19vw,84px)!important;line-height:.9!important;}
html[data-v4] .td-hero .td-kch>p:first-child span{font:500 14px var(--v-font)!important;color:rgba(20,20,20,.72)!important;}
html[data-v4] .app-page :is(.td-bt b,.td-burn li b,.td-aim b){font-family:var(--v-font)!important;font-weight:600!important;letter-spacing:-.2px!important;}
html[data-v4] .td-burn .td-bt b{font-weight:300!important;letter-spacing:-1.5px!important;}
html[data-v4] .td-mac span{font-weight:600!important;}
html[data-v4] :is(.td-mac em,.td-aim span,.me-chart text,.td-src,.td-game time){font-family:var(--v-font)!important;}
html[data-v4] .td-aim span{font-size:11.5px!important;font-weight:500!important;}
html[data-v4] .muted,html[data-v4] .note{color:var(--muted);}

/* ------------------------------------------------------------ 4. top bar + the floating pill tab bar */
html[data-v4] .app-top{background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html[data-v4] .app-top.scrolled{background:color-mix(in srgb,var(--v-bg) 72%,transparent)!important;-webkit-backdrop-filter:blur(18px) saturate(150%)!important;backdrop-filter:blur(18px) saturate(150%)!important;}
html[data-v4] .app-top-in{height:64px!important;}
html[data-v4] :is(.app-av,.app-jogo){border-radius:999px!important;background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-glass-sh)!important;color:var(--ink)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
html[data-v4="light"] :is(.app-av,.app-jogo){background:rgba(255,255,255,.82)!important;}
html[data-v4] .app-jogo{height:40px!important;padding:0 15px!important;}
/* the avatar initial: one solid disc, no ring around it */
html[data-v4] .app-av{width:44px!important;height:44px!important;font:600 16px var(--v-font)!important;}
html[data-v4="dark"] .app-av{background:var(--v-o-grad)!important;color:#141414!important;border:0!important;box-shadow:var(--v-o-glow)!important;}
html[data-v4="light"] .app-av{background:#141414!important;color:#FF8A33!important;border:0!important;box-shadow:0 8px 18px -10px rgba(0,0,0,.6)!important;}
html[data-v4] .app-bar{left:14px!important;right:14px!important;bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 14px)!important;height:68px;padding:8px!important;border-radius:999px!important;
  background:var(--v-bar)!important;border:1px solid rgba(255,255,255,.07)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:4px;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 22px 44px -14px rgba(0,0,0,.65),0 4px 12px rgba(0,0,0,.25)!important;}
html[data-v4] .app-bar button{position:relative;flex:0 0 auto!important;min-width:52px;height:52px;padding:0 14px!important;border-radius:999px!important;flex-direction:row!important;justify-content:center!important;gap:7px!important;
  color:#B5B5B9!important;font:600 13.5px var(--v-font)!important;}
html[data-v4] .app-bar button svg{width:21px;height:21px;}
html[data-v4] .app-bar button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
html[data-v4] .app-bar button.on{background:#FFFFFF!important;color:#141414!important;padding:0 18px!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06),0 6px 14px -6px rgba(0,0,0,.5)!important;}
html[data-v4] .app-bar button.on svg{color:#141414!important;}
html[data-v4] .app-bar button.on span{position:static;width:auto;height:auto;clip:auto;overflow:visible;color:#141414!important;}
html[data-v4] .app-bar .app-plus{margin-top:0!important;width:52px!important;height:52px!important;min-width:52px!important;padding:0!important;background:var(--v-o-grad)!important;color:#141414!important;box-shadow:var(--v-o-glow)!important;}
html[data-v4] .app-bar .app-plus svg{width:24px;height:24px;}
html[data-v4] .app-page{padding-bottom:calc(112px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important;}
html[data-v4] .fu-toast{bottom:calc(98px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)));}

/* ------------------------------------------------------------ 5. cards, tiles, rows */
html[data-v4] :is(.card,.ms-card,.ex-card,.pl-opt,.pc-opt,.h-stats,.tl-ex,.ob-goal,.ob-act,.acct-card){
  background:var(--v-card)!important;border:0!important;border-radius:var(--v-r-card)!important;box-shadow:var(--v-card-sh)!important;}
html[data-v4="dark"] :is(.card,.ms-card,.ex-card,.pl-opt,.pc-opt,.h-stats,.tl-ex,.ob-goal,.ob-act,.acct-card){box-shadow:var(--v-card-sh),inset 0 0 0 1px rgba(255,255,255,.035)!important;}
html[data-v4] :is(.ms-card,.ob-goal,.ob-act,.pl-opt,.pc-opt){border-radius:var(--v-r-tile)!important;}
/* the picked onboarding choice: an ember line inside the card, no outer halo ring */
html[data-v4] :is(.ob-goal,.ob-act,.pc-opt,.pl-opt):has(input:checked){box-shadow:inset 0 0 0 2px var(--ember),var(--v-card-sh)!important;}
html[data-v4] .ob-goal b{font:500 19px/1.15 var(--v-font)!important;letter-spacing:-.2px!important;}
/* inner tiles */
html[data-v4] .stat{background:var(--s2)!important;border-radius:20px!important;}
html[data-v4] .td-next{background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;border-radius:var(--v-r-row)!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4="light"] .td-next{background:#F4F3F0!important;border-color:rgba(20,20,20,.05)!important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.04)!important;}
html[data-v4] .td-next span{font:600 12px var(--v-font)!important;color:var(--ember-ink)!important;}
html[data-v4] .td-next em{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--v-glass);color:var(--ink)!important;font-size:20px!important;}
html[data-v4] .me-empty{border:1px dashed var(--v-line-hi)!important;border-radius:var(--v-r-row)!important;}
/* settings rows */
html[data-v4] .ms-row{min-height:60px!important;padding:14px 18px!important;}
html[data-v4] .ms-row b{font-weight:500!important;}
html[data-v4] .ms-row>em{width:32px;height:32px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--v-glass);border:1px solid var(--v-glass-line);color:var(--ink)!important;font-size:18px!important;}
html[data-v4="light"] .ms-row>em{background:#F1F0EC;border-color:rgba(20,20,20,.05);}
html[data-v4] .ms-row>em.ms-on{background:none;border:0;color:var(--ember-ink)!important;}
html[data-v4] .ms-grp>.eyebrow{margin:0 8px 10px!important;}
/* switches: a track with a white knob, ember when on */
html[data-v4] .ms-sw input{background:rgba(127,127,127,.28)!important;border:0!important;width:50px!important;height:30px!important;}
html[data-v4] .ms-sw input:checked{background:var(--v-o-grad)!important;box-shadow:var(--v-o-glow)!important;}
/* the knob keeps an even 2px inset on every side, off and on (it was 22px in the 30px track: 6px under it, 8px to its right when on) */
html[data-v4] .ms-sw input::after{top:2px;left:2px;width:26px;height:26px;}
html[data-v4] .ms-sw input:checked::after{transform:translateX(20px);}

/* ------------------------------------------------------------ 6. the signature blocks
   Today's calories (and the Coach's today, the rest timer): Fuel's orange, now a gradient with
   its glow and dark ink. The Me card, the check-in and the Progress numbers: the dark block with
   an orange corner glow (same in both themes, so every token inside is the dark one). */
html[data-v4] :is(.td-hero,.pg-hero,.co-today,.tl-rest){
  background:radial-gradient(90% 90% at 100% 0%,rgba(255,226,190,.5) 0%,rgba(255,226,190,0) 55%),var(--v-o-grad)!important;color:#141414!important;border:0!important;
  border-radius:30px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 22px 40px -16px rgba(226,95,0,.55)!important;}
html[data-v4] :is(.td-hero,.pg-hero,.co-today) :is(h1,h2,h3,p,b,span,small,div,.eyebrow,.note,.unit,em,label){color:#141414!important;}
html[data-v4] :is(.td-hero,.pg-hero,.co-today) :is(.eyebrow,.note,.td-kof,.td-mac em,.unit,small){color:rgba(20,20,20,.72)!important;}
html[data-v4] .pg-now b{font-weight:300!important;letter-spacing:-2.5px!important;font-size:clamp(56px,16vw,72px)!important;}
html[data-v4] .td-hero .td-kbar{height:12px!important;background:rgba(255,255,255,.55)!important;}
html[data-v4] .td-hero .td-kbar s{background:repeating-linear-gradient(90deg,#141414 0 3px,transparent 3px 6px)!important;border-radius:9px;}
html[data-v4] .td-hero .td-kbar.over s{background:repeating-linear-gradient(90deg,#7A0F1E 0 3px,transparent 3px 6px)!important;}
html[data-v4] .td-hero .td-mac i{background:rgba(255,255,255,.5)!important;color:#141414!important;height:8px!important;}
html[data-v4] :is(.td-hero,.pg-hero,.co-today) .btn.btn.btn{background:#141414!important;color:#F5F3EF!important;border:0!important;box-shadow:0 8px 18px -8px rgba(0,0,0,.5)!important;}
html[data-v4] .tl-rest :is(span,b){color:#141414!important;}
html[data-v4] .tl-rest button{background:rgba(20,20,20,.14)!important;font:600 13px var(--v-font)!important;color:#141414!important;}
html[data-v4] .app-page :is(.me-head,.co-ci,.me-progress .stats){
  --ink:#F5F3EF; --ink2:#BDBAB4; --muted:#A3A09A; --s2:#2E2D2C; --line:rgba(255,255,255,.08);
  --v-glass:rgba(255,255,255,.08); --v-glass-line:rgba(255,255,255,.10);
  background:radial-gradient(90% 80% at 100% 0%,rgba(255,122,26,.30) 0%,rgba(255,122,26,0) 62%),var(--v-block)!important;color:#F5F3EF!important;
  border:0!important;border-radius:30px!important;box-shadow:var(--v-block-sh)!important;}
html[data-v4] .app-page :is(.me-head,.co-ci,.me-progress .stats) :is(h1,h2,h3,p,b,span,small,.eyebrow,.note,.unit){color:#F5F3EF!important;}
html[data-v4] .app-page :is(.me-head .muted,.me-head p,.co-ci .eyebrow,.co-ci .note,.me-progress .stats .unit,.me-progress .stats b small,.me-progress .stats .stat>span){color:#BDBAB4!important;}
html[data-v4] .app-page .me-progress .stats .stat:not(:first-child){background:rgba(255,255,255,.07)!important;border-radius:20px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;}
html[data-v4] .app-page .me-progress .stats b{font-weight:300!important;}
html[data-v4] .app-page .me-progress .stats .stat:first-child b{font-size:clamp(56px,16vw,72px)!important;letter-spacing:-2.5px!important;}
html[data-v4] .app-page .co-ci .btn{background:var(--v-o-grad)!important;color:#141414!important;box-shadow:var(--v-o-glow)!important;}
/* the avatar in the Me card: one disc, no frame */
html[data-v4] .app-page .me-head .me-av{background:var(--v-o-grad)!important;color:#141414!important;font:500 26px var(--v-font)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)!important;border:0!important;}
html[data-v4] .co-ci{border-left:0!important;}

/* ------------------------------------------------------------ 7. chips, segments, buttons */
html[data-v4] .chip{border-radius:999px!important;background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-glass-sh);
  font:500 13.5px var(--v-font)!important;color:var(--ink)!important;min-height:38px;display:inline-flex;align-items:center;padding:8px 15px!important;}
html[data-v4="light"] .chip{background:rgba(255,255,255,.86)!important;border-color:rgba(20,20,20,.05)!important;}
html[data-v4] :is(.chip.on,.chip[aria-pressed="true"]){background:var(--v-chip-on)!important;color:var(--v-chip-on-ink)!important;border-color:transparent!important;font-weight:600!important;}
/* segmented controls: a sunk track, the picked part a raised white pill */
html[data-v4] .seg{background:var(--v-field)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-field-sh)!important;padding:4px!important;}
html[data-v4="light"] .seg{background:rgba(20,20,20,.05)!important;border-color:rgba(20,20,20,.04)!important;}
html[data-v4] .seg label{font:500 13.5px var(--v-font)!important;color:var(--ink2)!important;padding:9px 8px!important;}
html[data-v4] .seg label:has(input:checked){background:#F5F3EF!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.06),0 6px 14px -6px rgba(0,0,0,.55)!important;}
html[data-v4="light"] .seg label:has(input:checked){background:#FFFFFF!important;box-shadow:inset 0 -2px 0 rgba(0,0,0,.05),0 6px 14px -6px rgba(90,40,0,.35)!important;}
html[data-v4] .seg input:checked + span{color:#141414!important;font-weight:600!important;}
html[data-v4] :is(.td-eff div,.pg-rng){background:var(--v-field)!important;box-shadow:var(--v-field-sh)!important;}
html[data-v4] .td-burn li.td-eff button{font:500 12px var(--v-font)!important;}
html[data-v4] .td-burn li.td-eff button[aria-pressed="true"]{background:var(--v-o-grad)!important;color:#141414!important;box-shadow:var(--v-o-glow)!important;}
/* buttons: primary is the orange gradient with its glow; ghost is glass */
html[data-v4] .btn{border-radius:999px!important;font:600 15px var(--v-font)!important;letter-spacing:normal!important;}
/* :not(:is()) keeps this at one class of weight, so a block that paints its own button (the hero, Apple) wins */
html[data-v4] .btn:not(:is(.ghost,.sec,.secondary,.link)){background:var(--v-o-grad)!important;color:#141414!important;border:0!important;box-shadow:var(--v-o-glow)!important;}
html[data-v4] .btn:is(.ghost,.sec,.secondary){background:var(--v-glass)!important;color:var(--ink)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4="light"] .btn:is(.ghost,.sec,.secondary){background:#FFFFFF!important;border-color:rgba(20,20,20,.06)!important;}
html[data-v4="light"] :is(.card,.ms-card,.fu-sheet-in) .btn:is(.ghost,.sec,.secondary){background:#F1F0EC!important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)!important;}
html[data-v4] .btn:hover{transform:translateY(-1px);}
html[data-v4] .linkbtn{color:var(--ink2)!important;}
/* round icon buttons (day arrows, edit, delete, close) */
html[data-v4] :is(.td-nav,.me-ic,.fu-shx,.chip-x,.td-x,.ph-nav){border-radius:50%!important;background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;color:var(--ink)!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4="light"] :is(.td-nav,.me-ic,.fu-shx,.chip-x,.td-x){background:#FFFFFF!important;border-color:rgba(20,20,20,.06)!important;}
html[data-v4="light"] :is(.card,.ms-card,.fu-sheet-in) :is(.td-nav,.me-ic,.chip-x,.td-x){background:#F1F0EC!important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)!important;}
html[data-v4] .td-nav{width:44px!important;height:44px!important;}
/* the Add / + buttons in the meal cards and the "+ Log weight" pills */
html[data-v4] :is(.td-add,.td-addact summary){font-family:var(--v-font)!important;font-weight:600!important;}

/* ------------------------------------------------------------ 8. fields */
html[data-v4] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select){
  border-radius:999px!important;background:var(--v-field)!important;border:1px solid var(--v-glass-line)!important;color:var(--ink)!important;
  box-shadow:var(--v-field-sh)!important;font-family:var(--v-font)!important;min-height:50px;padding:0 18px!important;}
html[data-v4="light"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select){background:rgba(255,255,255,.8)!important;border-color:rgba(20,20,20,.08)!important;}
html[data-v4] textarea{border-radius:22px!important;background:var(--v-field)!important;border:1px solid var(--v-glass-line)!important;color:var(--ink)!important;box-shadow:var(--v-field-sh)!important;font-family:var(--v-font)!important;}
html[data-v4="light"] textarea{background:rgba(255,255,255,.8)!important;border-color:rgba(20,20,20,.08)!important;}
html[data-v4] :is(input,textarea)::placeholder{color:var(--muted)!important;opacity:1;}
html[data-v4] :is(input,select,textarea):focus{outline:none!important;border-color:var(--ember)!important;box-shadow:var(--v-field-sh),0 0 0 3px rgba(255,122,26,.22)!important;}
/* the seg and switch inputs keep their own shapes */
html[data-v4] .seg input{min-height:0!important;padding:0!important;box-shadow:none!important;}
html[data-v4] .ms-sw input{min-height:0!important;padding:0!important;border-radius:999px!important;}
html[data-v4] label{font-family:var(--v-font);}
/* labels over fields: a little in from the pill's round end */
html[data-v4] :is(.fu-sb,.ob,.acct-card,.card) form label:not(.acct-check):not(.me-switch):not(.ob-goal):not(.ob-act){padding-left:6px;}

/* ------------------------------------------------------------ 9. rings, bars, charts */
/* today's aims: the ring is drawn on its own layer and cut to a ring with a mask, so the hole is
   see-through on any card (the old hole was painted in the card colour: a frame on the gradient) */
html[data-v4] .td-aim i{background:none!important;}
html[data-v4] .td-aim i::after{inset:0!important;background:conic-gradient(var(--ember) calc(var(--p) * 1%),rgba(127,127,127,.18) 0)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));}
html[data-v4] .td-aim i svg{z-index:1;}
html[data-v4] .td-aimh b{font:600 13px var(--v-font)!important;color:var(--ember-ink)!important;}
html[data-v4] :is(.td-kbar,.td-mac i,.pg-bar,.td-enbar){border-radius:99px!important;}
html[data-v4] .td-kbar{height:10px!important;background:rgba(127,127,127,.16)!important;}
html[data-v4] .td-kbar s{background:var(--v-o-grad)!important;}
/* the weight trend: a 2px line, a soft fill under it, small hollow dots */
html[data-v4] .me-chart .tr{stroke-width:2.25!important;}
html[data-v4] .me-chart .dot{fill:var(--s1)!important;stroke:var(--muted)!important;stroke-width:1!important;}
html[data-v4] .me-chart .g{stroke:var(--line)!important;}
html[data-v4] .me-chart text{font:500 11px var(--v-font)!important;fill:var(--muted)!important;}
html[data-v4] svg :is(rect)[rx]{shape-rendering:geometricPrecision;}
/* water glasses */
html[data-v4] .td-cups i{border-radius:5px 5px 8px 8px!important;}

/* ------------------------------------------------------------ 10. Today */
html[data-v4] .td-meal li{border-top:1px solid var(--line)!important;}
html[data-v4] .td-meal li>span{font-size:18px!important;}
html[data-v4] .td-burn li{border-bottom:1px solid var(--line)!important;}
html[data-v4] .td-src{border-radius:999px!important;font-weight:600!important;}
/* the meal picked for now (the lit card): an ember line inside, no outer frame */
html[data-v4] .td-meal.now,html[data-v4] .td-meal[open].now{box-shadow:inset 0 0 0 1.5px var(--ember),var(--v-card-sh)!important;}
/* Snap your plate + the barcode tile */
html[data-v4] .pk-snap{background:var(--v-o-grad)!important;color:#141414!important;border-radius:var(--v-r-row)!important;box-shadow:var(--v-o-glow)!important;}
html[data-v4] .pk-snap b{font:600 17px/1.15 var(--v-font)!important;}
html[data-v4] .pk-bar{background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;border-radius:var(--v-r-row)!important;box-shadow:var(--v-glass-sh)!important;font:600 12px var(--v-font)!important;}
html[data-v4="light"] .pk-bar{background:#F1F0EC!important;border-color:rgba(20,20,20,.05)!important;}

/* ------------------------------------------------------------ 11. Progress, Coach, Me */
html[data-v4] .me-hist li{border-bottom:1px solid var(--line)!important;}
html[data-v4] .me-hist .me-d{font-family:var(--v-font)!important;color:var(--ink2)!important;}
html[data-v4] :is(.me-ph,.me-pht,.dy-ph) img{border-radius:14px!important;}
html[data-v4] .tr-week button{border-radius:18px!important;border:1px solid transparent!important;background:var(--v-glass)!important;}
html[data-v4="light"] .tr-week button{background:#F4F3F0!important;}
html[data-v4] .tr-week button span{font:500 11.5px var(--v-font)!important;}
html[data-v4] .tr-week button b{font-weight:600!important;}
html[data-v4] .tr-week button[aria-selected="true"]{background:var(--v-chip-on)!important;box-shadow:0 6px 14px -6px rgba(0,0,0,.45)!important;}
html[data-v4] .tr-week button[aria-selected="true"] :is(span,b){color:var(--v-chip-on-ink)!important;}
html[data-v4] .tr-week button.now:not([aria-selected="true"]) span{color:var(--ember-ink)!important;}
html[data-v4] :is(.tr-card,.tr-rest,.co-pane .card .card){border-radius:var(--v-r-row)!important;}
/* Your days calendar */
html[data-v4] .dy-d{border-radius:50%!important;border:0!important;width:100%;max-width:52px;justify-self:center;aspect-ratio:1/1!important;min-height:38px!important;}
html[data-v4] .dy-d.now b{background:none!important;width:auto!important;height:auto!important;}
html[data-v4] .dy-d.now s{background:#141414!important;}
html[data-v4] .dy-d.has{background:var(--v-glass)!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4="light"] .dy-d.has{background:#F1F0EC!important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05)!important;}
html[data-v4] .dy-d.now{background:var(--v-o-grad)!important;color:#141414!important;box-shadow:var(--v-o-glow)!important;}
html[data-v4] .dy-d b{font-family:var(--v-font)!important;font-weight:500!important;}
html[data-v4] .dy-d.now b{color:#141414!important;}
html[data-v4] .dy-step{background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;border-radius:999px!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4] .dy-st .stat,html[data-v4] .dy-take{border-radius:20px!important;}
html[data-v4] .dy-mn b{font:500 15px var(--v-font)!important;}

/* ------------------------------------------------------------ 12. sheets, dialogs, toasts */
html[data-v4] :is(.app-sheet,.fu-sheet){background:var(--v-overlay)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
html[data-v4] :is(.app-sheet-in,.fu-sheet-in){border-radius:34px 34px 0 0!important;background:var(--v-sheet)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 -20px 44px -20px rgba(0,0,0,.5)!important;}
html[data-v4] .app-sheet-in{padding:18px 16px calc(24px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important;gap:10px!important;}
html[data-v4] .app-sheet-in button:not(.app-x){border-radius:22px!important;min-height:60px;background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-glass-sh)!important;
  font:500 16px var(--v-font)!important;color:var(--ink)!important;text-align:left;padding:0 22px!important;}
html[data-v4="light"] .app-sheet-in button:not(.app-x){background:#F4F3F0!important;border-color:rgba(20,20,20,.05)!important;box-shadow:inset 0 -1px 0 rgba(0,0,0,.04)!important;}
html[data-v4] .app-sheet-in button[data-do="photo"]{background:var(--v-o-grad)!important;color:#141414!important;border:0!important;box-shadow:var(--v-o-glow)!important;font-weight:600!important;}
html[data-v4] .app-sheet-in .app-x{font:500 15px var(--v-font)!important;color:var(--ink2)!important;min-height:48px;}
html[data-v4] .fu-sh{border-bottom:0!important;padding:20px 20px 10px 22px!important;}
html[data-v4] .fu-sh b{font:400 24px/1.15 var(--v-font)!important;letter-spacing:-.5px!important;}
html[data-v4] .fu-sheet-in{position:relative;}
html[data-v4] .fu-sheet-in::before{content:'';position:absolute;top:8px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:9px;background:var(--v-line-hi);}
html[data-v4] .fu-toast{border-radius:999px!important;background:#1F1E1E!important;color:#F5F3EF!important;border:1px solid rgba(255,255,255,.08)!important;font:500 14px/1.35 var(--v-font)!important;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6)!important;padding:13px 20px!important;}
html[data-v4] .scan-box{border-radius:28px!important;}
/* a sheet in the app pins under the clock when typing (fuel.css html.kb-open): no rounded top there */
html[data-v4].kb-open .fu-sheet-in{border-radius:0!important;}
html[data-v4].kb-open .fu-sheet-in::before{display:none;}

/* ------------------------------------------------------------ 13. sign-in, the site header on /me and /account */
html[data-v4] .acct-page .hero h1{font-weight:300!important;}
html[data-v4] .acct-or span{font-family:var(--v-font)!important;}
html[data-v4] .acct-why{gap:12px!important;}
html[data-v4] .acct-why li{background:var(--v-card)!important;border-radius:var(--v-r-tile)!important;box-shadow:var(--v-card-sh)!important;border:0!important;padding:18px 20px!important;}
html[data-v4] .acct-why b{font:500 19px/1.2 var(--v-font)!important;letter-spacing:-.2px!important;margin-bottom:6px!important;}
html[data-v4] .acct-why span{font-size:14.5px;line-height:1.5;}
html[data-v4] :is(.acct-apple,.acct-google){min-height:54px!important;}
html[data-v4] .btn.acct-apple{background:#141414!important;color:#FFFFFF!important;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)!important;border:0!important;}
html[data-v4="dark"] .btn.acct-apple{background:#F5F3EF!important;color:#141414!important;}
html[data-v4] .top{background:transparent!important;border-bottom:0!important;box-shadow:none!important;}
html[data-v4] .nav-right a.acct,html[data-v4] .nav-login{font:600 14px var(--v-font)!important;}
html[data-v4] .nav-right a.acct{background:var(--v-o-grad)!important;color:#141414!important;box-shadow:var(--v-o-glow)!important;border-radius:999px!important;}
html[data-v4] footer{background:transparent!important;}

/* ------------------------------------------------------------ 14. desktop: the app is a phone layout.
   Centre it as one column with room around it, the bar as a centred pill, sheets as centred dialogs. */
@media (min-width:769px){
  html[data-v4]{background-size:100% 760px,auto!important;}
  html[data-v4] .app-page .me-page{max-width:720px!important;margin-left:auto!important;margin-right:auto!important;}
  html[data-v4] .app-top-in{max-width:720px!important;padding:0 18px!important;}
  html[data-v4] .app-bar{left:50%!important;right:auto!important;transform:translateX(-50%);width:min(500px,calc(100% - 48px))!important;}
  html[data-v4] .fu-sheet{align-items:center!important;padding:40px!important;}
  html[data-v4] .fu-sheet-in{border-radius:34px!important;max-width:560px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -24px rgba(0,0,0,.7)!important;}
  html[data-v4] .fu-sheet-in::before{display:none;}
  html[data-v4] .app-sheet{align-items:center!important;justify-content:center!important;}
  html[data-v4] .app-sheet-in{max-width:480px!important;border-radius:34px!important;}
}

/* ------------------------------------------------------------ 15. in-app dialogs (fuel-account.js dlg)
   Questions, notes and typed answers, in place of the browser's own boxes. A card in the middle of
   the screen over a dimmed page, above sheets, the photo viewer and a live session. */
html[data-v4] .fu-dlg{position:fixed;inset:0;z-index:2600;display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--v-overlay);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fu-dlg-in .18s ease-out;}
html[data-v4] .fu-dlg-in{width:100%;max-width:400px;padding:26px 22px 20px;border-radius:30px;background:var(--v-sheet);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -24px rgba(0,0,0,.7);animation:fu-dlg-up .22s cubic-bezier(.2,.9,.3,1.2);}
html[data-v4] .fu-dlg-in p{margin:0 4px;font:400 17px/1.45 var(--v-font);color:var(--ink);overflow-wrap:anywhere;}
html[data-v4] .fu-dlg-f{width:100%;margin-top:16px;font-size:17px!important;letter-spacing:.04em!important;}
html[data-v4] .fu-dlg-b{display:flex;gap:10px;margin-top:22px;}
html[data-v4] .fu-dlg-b .btn{flex:1 1 0;min-height:50px;padding:0 14px!important;justify-content:center;text-align:center;line-height:1.15;}
html[data-v4] .fu-dlg-b .btn:only-child{flex:1 1 100%;}
/* a step that deletes something: red with white text, not the orange "go" colour */
html[data-v4] .fu-dlg-b .btn.fu-dlg-danger{background:linear-gradient(160deg,#E2475A 0%,#C8243A 100%)!important;color:#FFFFFF!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -10px rgba(200,36,58,.7)!important;}
@keyframes fu-dlg-in{from{opacity:0}to{opacity:1}}
@keyframes fu-dlg-up{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html[data-v4] :is(.fu-dlg,.fu-dlg-in){animation:none;}}

/* ------------------------------------------------------------ 16. the Today hero, laid out as the mock-up
   (09 Fuel Today): the number with "kcal left" beside it, what was eaten under it, the ticked bar, then
   protein, carbs and fat as three small tiles with their numbers first. */
html[data-v4] .td-hero{padding:24px 20px 18px!important;gap:14px!important;}
html[data-v4] .td-hero .td-kch{flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important;}
html[data-v4] .td-hero .td-kch>p:first-child{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
html[data-v4] .td-hero .td-kch>p:first-child span{display:inline!important;margin:0!important;font:500 16px var(--v-font)!important;color:rgba(20,20,20,.78)!important;}
html[data-v4] .td-hero .td-kof{font:500 14px var(--v-font)!important;}
html[data-v4] .td-hero .td-kof b{font-weight:600!important;color:#141414!important;}
html[data-v4] .td-hero .td-macs{gap:8px!important;margin-top:4px;}
html[data-v4] .td-hero .td-mac{display:flex!important;flex-direction:column;align-items:stretch;gap:6px!important;padding:12px 10px 13px 12px;border-radius:20px;min-width:0;
  background:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 6px 14px -10px rgba(120,45,0,.45);}
html[data-v4] .td-hero .td-mac span{order:1;font:500 clamp(11px,3vw,12.5px) var(--v-font)!important;color:rgba(20,20,20,.78)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-v4] .td-hero .td-mac em{order:2;font:300 19px/1.1 var(--v-font)!important;letter-spacing:-.3px!important;color:#141414!important;white-space:nowrap;}
html[data-v4] .td-hero .td-mac i{order:3;height:5px!important;background:rgba(20,20,20,.12)!important;}
@media (max-width:360px){html[data-v4] .td-hero .td-mac em{font-size:16px!important;}}

/* ------------------------------------------------------------ 17. the live session (Coach > Start) and its rest timer
   The page under the glow; each exercise a card; a set row a sunk track; the number fields small
   pills that fit "62.5" (the field rule above pads 18px, which cut it to "62."); the tick round,
   ember when done (Fuel's old lime green was not in this look). */
html[data-v4] .tr-live{background:var(--v-glow),var(--v-bg)!important;background-repeat:no-repeat!important;background-size:100% 520px,auto!important;}
html[data-v4] .tl-top{background:transparent!important;border-bottom:0!important;padding-bottom:12px!important;}
html[data-v4] .tl-top b{font:500 20px var(--v-font)!important;letter-spacing:-.3px!important;}
html[data-v4] .tl-top span{font:500 13px var(--v-font)!important;color:var(--ink2)!important;}
html[data-v4] .tl-close{background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4="light"] .tl-close{background:#FFFFFF!important;}
html[data-v4] .tl-ex{background:var(--v-card)!important;border:0!important;border-radius:var(--v-r-card)!important;box-shadow:var(--v-card-sh)!important;padding:14px 14px 16px!important;margin-bottom:14px!important;}
html[data-v4] .tl-media{border-radius:20px!important;}
html[data-v4] .tl-eh{align-items:center!important;row-gap:6px!important;}
html[data-v4] .tl-eh h3{font:500 17px var(--v-font)!important;}
html[data-v4] .tl-eh>span{font:500 13px var(--v-font)!important;color:var(--ink2)!important;}
html[data-v4] .tl-swap{font:600 12.5px var(--v-font)!important;}
html[data-v4] .tl-set{background:var(--v-field)!important;box-shadow:var(--v-field-sh)!important;border-radius:20px!important;padding:6px 6px 6px 14px!important;gap:6px!important;}
html[data-v4="light"] .tl-set{background:#F1F0EC!important;}
html[data-v4] .tl-set.done{background:rgba(255,122,26,.16)!important;box-shadow:inset 0 0 0 1px rgba(255,122,26,.32)!important;}
html[data-v4] .tl-n{font:500 12.5px var(--v-font)!important;color:var(--ink2)!important;width:52px!important;}
html[data-v4] .tl-in{align-items:center!important;}
html[data-v4] .tl-in input{min-height:44px!important;padding:0 4px!important;border-radius:999px!important;text-align:center!important;font:500 17px var(--v-font)!important;letter-spacing:-.2px!important;}
html[data-v4] .tl-in span,html[data-v4] .tl-x{font:500 12.5px var(--v-font)!important;color:var(--muted)!important;}
html[data-v4] .tl-ok{width:46px!important;height:46px!important;border-radius:50%!important;background:var(--v-glass)!important;border:1px solid var(--v-glass-line)!important;color:var(--ink2)!important;box-shadow:var(--v-glass-sh)!important;}
html[data-v4="light"] .tl-ok{background:#FFFFFF!important;border-color:rgba(20,20,20,.06)!important;}
html[data-v4] .tl-set.done .tl-ok{background:var(--v-o-grad)!important;border:0!important;color:#141414!important;box-shadow:var(--v-o-glow)!important;}
html[data-v4] .tl-rest{border-radius:999px!important;padding:10px 10px 10px 24px!important;left:14px!important;right:14px!important;bottom:calc(14px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important;}
html[data-v4] .tl-rest span{font:500 13px var(--v-font)!important;}
html[data-v4] .tl-rest b{font:300 34px/1 var(--v-font)!important;letter-spacing:-1px!important;font-variant-numeric:tabular-nums;}
html[data-v4] .tl-rest button{min-height:44px;padding:0 16px!important;border-radius:999px!important;}
@media (min-width:769px){
  html[data-v4] .tl-body{width:100%;max-width:720px;margin:0 auto;}
  html[data-v4] .tl-top{width:100%;max-width:752px;margin:0 auto;}
  html[data-v4] .tl-rest{left:50%!important;right:auto!important;transform:translateX(-50%);width:min(520px,calc(100% - 48px));}
}

/* ------------------------------------------------------------ 18. wide screens: see section 21 (Nov 8) */
/* My Fuel on the site: the calories card no longer stretches to the burn list's height */
html[data-v4] .td-top{align-items:start!important;}
html[data-v4] .td-col--b .td-top{display:block!important;}
html[data-v4] .td-cols .td-hero{margin-bottom:16px!important;}

/* ------------------------------------------------------------ 19. JOGO's v4 shell (Nov 7)
   Fuel's bars as JOGO's (css/v4-shell.css): on a phone every tab is named under its icon, the lit
   one in ember (JOGO lights its tab yellow), and "+" is JOGO's Start, a rotated rounded square. From
   769px the tabs move into a flat full-width top bar as pills, the lit one a dark chip, "+" a round
   button at their end. Page and section titles bold, as JOGO's (800 and 700). */
@font-face{font-family:'V4 Bold';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'V4 Bold';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(https://fonts.gstatic.com/s/plusjakartasans/v12/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko40yyygA.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}
html[data-v4]{--v-font-b:'V4 Bold','Plus Jakarta Sans',system-ui,-apple-system,sans-serif;}
/* titles: the greeting, the day, the tab titles, sheet titles 800; card heads 700 */
html[data-v4] .app-page :is(h1,h2),html[data-v4] .fu-sh b{font-family:var(--v-font-b)!important;font-weight:800!important;letter-spacing:-.6px!important;}
html[data-v4] .app-page h3{font-family:var(--v-font-b)!important;font-weight:700!important;letter-spacing:-.2px!important;}
html[data-v4] .td-greet h1{font-size:clamp(28px,8.2vw,40px)!important;letter-spacing:-1px!important;line-height:1.05!important;}
html[data-v4] .td-head h2{font-size:24px!important;}
html[data-v4] .fu-sh b{font-size:22px!important;}
html[data-v4] .app-page .eyebrow{font-weight:600!important;}

@media (max-width:768px){
  html[data-v4] .app-bar{height:auto!important;padding:8px 6px!important;border-radius:30px!important;justify-content:space-around!important;gap:0!important;}
  html[data-v4] .app-bar button:not(.app-plus){flex:1 1 0!important;min-width:52px!important;height:50px!important;padding:0!important;flex-direction:column!important;gap:3px!important;
    background:none!important;box-shadow:none!important;color:#B5B5B9!important;border-radius:16px!important;}
  html[data-v4] .app-bar button:not(.app-plus) span{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:hidden!important;max-width:100%;text-overflow:ellipsis;
    font:600 10px/1.1 var(--v-font-b)!important;color:inherit!important;white-space:nowrap;}
  html[data-v4] .app-bar button:not(.app-plus) svg{width:22px!important;height:22px!important;color:inherit!important;}
  html[data-v4] .app-bar button.on:not(.app-plus){color:#FF8A33!important;background:none!important;padding:0!important;box-shadow:none!important;}
  html[data-v4] .app-bar button.on:not(.app-plus) :is(svg,span){color:#FF8A33!important;}
  html[data-v4] .app-bar .app-plus{flex:0 0 66px!important;width:66px!important;min-width:66px!important;height:50px!important;padding:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;display:grid!important;place-items:center!important;}
  html[data-v4] .app-bar .app-plus::before{content:'';position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-29px 0 0 -25px;border-radius:16px;transform:rotate(45deg);
    background:var(--v-o-grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 20px -8px rgba(226,95,0,.8);transition:transform .15s ease;}
  html[data-v4] .app-bar .app-plus svg{position:relative;z-index:1;width:24px!important;height:24px!important;margin-top:-4px;color:#141414!important;stroke-width:2.4;}
  html[data-v4] .app-bar .app-plus:active{transform:none!important;}
  html[data-v4] .app-bar .app-plus:active::before{transform:rotate(45deg) scale(.92);}
}
@media (min-width:769px){
  html[data-v4] .app-top,html[data-v4] .app-top.scrolled{border-bottom:1px solid var(--line)!important;background:color-mix(in srgb,var(--v-bg) 82%,transparent)!important;
    -webkit-backdrop-filter:blur(18px) saturate(150%)!important;backdrop-filter:blur(18px) saturate(150%)!important;}
  html[data-v4] .app-top-in,html[data-v4] .app-page:has(.td-cols) .app-top-in{height:72px!important;max-width:none!important;padding:0 32px!important;}
  html[data-v4] .app-bar{top:calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px)) + 16px)!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;
    width:auto!important;height:40px!important;padding:0!important;gap:4px!important;border-radius:0!important;border:0!important;background:none!important;box-shadow:none!important;z-index:41!important;}
  html[data-v4] .app-bar button:not(.app-plus){height:40px!important;min-width:0!important;padding:0 14px!important;border-radius:999px!important;gap:0!important;background:none!important;box-shadow:none!important;
    font:600 14px var(--v-font-b)!important;color:var(--ink2)!important;}
  html[data-v4] .app-bar button:not(.app-plus) svg{display:none!important;}
  html[data-v4] .app-bar button:not(.app-plus) span{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;color:inherit!important;}
  html[data-v4] .app-bar button:not(.app-plus):hover{background:var(--v-glass)!important;color:var(--ink)!important;}
  html[data-v4] .app-bar button.on:not(.app-plus){background:var(--v-chip-on)!important;color:var(--v-chip-on-ink)!important;padding:0 16px!important;box-shadow:none!important;}
  html[data-v4] .app-bar .app-plus{order:9;width:40px!important;height:40px!important;min-width:40px!important;margin-left:8px!important;border-radius:50%!important;}
  html[data-v4] .app-bar .app-plus svg{width:20px!important;height:20px!important;}
  html[data-v4] .app-page{padding-bottom:56px!important;}
  html[data-v4] .fu-toast{bottom:28px!important;}
}
@media (min-width:769px) and (max-width:980px){
  html[data-v4] .app-bar button:not(.app-plus){padding:0 10px!important;font-size:13.5px!important;}
  html[data-v4] .app-top-in{padding:0 20px!important;}
}

/* sections that sit flat inside a sheet stay flat (the card rule above gave them a card's
   background with no padding: the health sheet's text ran into its edge) */
html[data-v4] .fu-sb :is(.me-health,.me-targets,.me-checkin){background:none!important;box-shadow:none!important;border-radius:0!important;}

/* the health page: today's numbers and where each is kept */
html[data-v4] .hd-h{font:600 13px var(--v-font)!important;color:var(--ink2)!important;margin:22px 0 2px!important;}
html[data-v4] .hd-list b{font:600 15px var(--v-font-b)!important;}
html[data-v4] .hd-list em{font:600 15px var(--v-font-b)!important;}
html[data-v4] .hd-tag{font:600 11px var(--v-font)!important;padding:3px 9px!important;}
html[data-v4] .hd-blk{background:var(--v-glass)!important;border:1px solid var(--v-glass-line);border-radius:var(--v-r-row)!important;}
html[data-v4="light"] .hd-blk{background:#F4F3F0!important;border-color:rgba(20,20,20,.05);}
html[data-v4] .hd-blk b{font:700 14px var(--v-font-b)!important;}
html[data-v4] .td-info{color:var(--ink2)!important;}
html[data-v4] .me-health .hd-blk{margin:12px 0 0!important;}
@media (min-width:769px){html[data-v4] body.app-page{padding-top:calc(92px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)))!important;}}
/* the keyboard is up: the tab bar steps aside (the bar rule above shows it with display:flex!important) */
html[data-v4].kb-open .app-bar{display:none!important;}
/* the hero's macro names shrink to fit a long word (German "Kohlenhydrate") instead of being cut */
html[data-v4] .td-hero .td-mac span{font-size:clamp(9.5px,2.7vw,12.5px)!important;letter-spacing:-.1px!important;}
/* 769 to 980px: the long tab names (Finnish, German) ran into the wordmark; the F alone stands for it there */
@media (min-width:769px) and (max-width:980px){html[data-v4] .app-brand .lockup{display:none!important;}}

/* ------------------------------------------------------------ 20. Recovery, Load, Sleep, the week (Nov 8)
   fuel-account.js (insToday, sleepSheet, insProgress) with fuel-insights.js. The ring's colour is
   decoration: the band is also written next to it. */
html[data-v4] .td-ins{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:0 0 16px;}
html[data-v4] .td-ins:empty{display:none;}
@media (min-width:600px) and (max-width:1023px){html[data-v4] .td-ins{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}}
html[data-v4] .ins-card{margin:0!important;}
html[data-v4] .ins-h{display:flex;align-items:center;gap:8px;margin:0!important;}
html[data-v4] .ins-beta{font:600 10.5px/1 var(--v-font)!important;padding:4px 8px;border-radius:999px;background:var(--s2);color:var(--ink2);}
html[data-v4] .ins-ct{margin:10px 0 14px;font:400 14.5px/1.45 var(--v-font);color:var(--ink);}
html[data-v4] .ins-ct b{font-weight:600;}
html[data-v4] .ins-rrow{display:flex;align-items:center;gap:16px;margin-top:12px;}
html[data-v4] .ins-ringw{position:relative;width:88px;height:88px;flex:none;}
html[data-v4] .ins-ring{width:100%;height:100%;display:block;}
html[data-v4] .ins-ring circle{fill:none;stroke-width:8;}
html[data-v4] .ins-ring .bg{stroke:var(--s2);}
html[data-v4] .ins-ring .fg{stroke-linecap:round;stroke:#2FBF71;}
html[data-v4] .b-mid .ins-ring .fg{stroke:#F2B705;}
html[data-v4] .b-lo .ins-ring .fg{stroke:#FF5A4E;}
html[data-v4] .ins-ringw b{position:absolute;inset:0;display:grid;place-items:center;font:300 32px/1 var(--v-font)!important;letter-spacing:-1px!important;font-variant-numeric:tabular-nums;color:var(--ink);}
html[data-v4] .ins-rtx{min-width:0;}
html[data-v4] .ins-rtx strong{display:block;font:700 21px/1.1 var(--v-font-b)!important;letter-spacing:-.4px!important;color:var(--ink);}
html[data-v4] .ins-rtx p{margin:5px 0 0;font:400 13.5px/1.4 var(--v-font);color:var(--ink2);}
html[data-v4] .ins-why{margin:12px 0 0;font:400 14px/1.45 var(--v-font);color:var(--ink);}
html[data-v4] .ins-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
html[data-v4] .ins-foot small{flex:1;min-width:0;font:400 12px/1.4 var(--v-font);color:var(--muted);}
html[data-v4] .ins-foot .btn,html[data-v4] .ins-cue .btn{flex:none;min-height:40px;padding:0 16px;}
html[data-v4] .ins-lrow{display:flex;align-items:baseline;gap:10px;margin-top:8px;}
html[data-v4] .ins-lrow b{font:300 46px/1 var(--v-font)!important;letter-spacing:-1.5px!important;font-variant-numeric:tabular-nums;color:var(--ink);}
html[data-v4] .ins-lrow span{font:600 15px var(--v-font-b);color:var(--ink);}
html[data-v4] .ins-load .ins-why{margin-top:6px;color:var(--ink2);font-size:13px;}
html[data-v4] .ins-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;height:86px;margin-top:14px;}
html[data-v4] .ins-bars span{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;height:100%;min-width:0;}
html[data-v4] .ins-bars i{display:block;align-self:end;width:min(22px,100%);min-height:3px;border-radius:7px 7px 3px 3px;background:color-mix(in srgb,var(--ember) 38%,var(--s2));}
html[data-v4] .ins-bars .now i{background:var(--v-o-grad);}
html[data-v4] .ins-bars small{margin-top:5px;font:600 11px var(--v-font);color:var(--muted);}
html[data-v4] .ins-bars .now small{color:var(--ink);}
html[data-v4] .ins-sub{margin:6px 0 0;font:400 12px var(--v-font);color:var(--muted);}
html[data-v4] .ins-sbars{height:132px;}
html[data-v4] .ins-sbars span{grid-template-rows:auto minmax(0,1fr) auto;}
html[data-v4] .ins-sbars em{font:600 10.5px var(--v-font);font-style:normal;color:var(--ink2);white-space:nowrap;margin-bottom:4px;}
html[data-v4] .ins-sbars i{background:color-mix(in srgb,#6E8BFF 45%,var(--s2));}
html[data-v4] .ins-sbars .now i{background:#6E8BFF;}
html[data-v4] .ins-sl{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;}
html[data-v4] .ins-sl b{font:300 42px/1 var(--v-font)!important;letter-spacing:-1.4px!important;color:var(--ink);}
html[data-v4] .ins-sl span{font:500 14px var(--v-font);color:var(--ink2);}
html[data-v4] .ins-stbar{display:flex;gap:2px;height:14px;margin:16px 0 12px;border-radius:7px;overflow:hidden;}
html[data-v4] .ins-stbar s{display:block;height:100%;min-width:2px;}
html[data-v4] .ins-stbar s.deep,html[data-v4] .ins-stl .deep i{background:#3B4FD9;}
html[data-v4] .ins-stbar s.rem,html[data-v4] .ins-stl .rem i{background:#9A72F2;}
html[data-v4] .ins-stbar s.light,html[data-v4] .ins-stl .light i{background:#7FB7FF;}
html[data-v4] .ins-stbar s.awake,html[data-v4] .ins-stl .awake i{background:#FF9A4D;}
html[data-v4] .ins-stl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;}
html[data-v4] .ins-stl li{display:flex;align-items:center;gap:8px;font:500 14px var(--v-font);color:var(--ink);}
html[data-v4] .ins-stl li i{width:10px;height:10px;border-radius:3px;flex:none;}
html[data-v4] .ins-stl li b{margin-left:auto;font:600 14px var(--v-font-b);}
html[data-v4] .ins-sleep .muted{margin:6px 0 0;}
html[data-v4] .ins-link{cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
html[data-v4] .dy-ld{margin:8px 0 0;font:500 13px/1.4 var(--v-font);color:var(--ink2);}
/* the weekly report, what affects you, body composition (Progress) */
html[data-v4] .ins-prog{display:grid;gap:16px;margin:16px 0;}
html[data-v4] .ins-prog:empty{display:none;}
html[data-v4] .ins-wkt{display:inline-flex;gap:4px;margin:12px 0 4px;padding:4px;border-radius:999px;background:var(--s2);}
html[data-v4] .ins-wkt button{min-height:36px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink2);font:600 13px var(--v-font);cursor:pointer;}
html[data-v4] .ins-wkt button[aria-pressed="true"]{background:var(--v-chip-on);color:var(--v-chip-on-ink);}
html[data-v4] .ins-wkr{margin:8px 0 0;font-size:13px;}
html[data-v4] :is(.ins-wk,.ins-affl){list-style:none;margin:8px 0 0;padding:0;}
html[data-v4] :is(.ins-wk,.ins-affl) li{padding:10px 0;border-bottom:1px solid var(--line);font:400 14.5px/1.45 var(--v-font);color:var(--ink);}
html[data-v4] :is(.ins-wk,.ins-affl) li:last-child{border-bottom:0;}
html[data-v4] .ins-card .hd-blk{margin-top:12px;}
html[data-v4] .ins-card .note{margin:12px 0 0;}
html[data-v4] .ins-wkh{display:flex;align-items:center;justify-content:space-between;gap:12px;}
html[data-v4] .ins-bst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 8px;}
html[data-v4] .ins-bst div{padding:12px 14px;border-radius:18px;background:var(--s2);}
html[data-v4] .ins-bst span{display:block;font:500 12.5px var(--v-font);color:var(--ink2);}
html[data-v4] .ins-bst b{font:300 28px/1.2 var(--v-font)!important;letter-spacing:-.6px!important;color:var(--ink);}

/* ------------------------------------------------------------ 21. a computer: a widened phone app (Nov 8)
   From 1024px: the tabs are a floating rail on the left (icons with their names, "+" on top, the lit
   tab a dark chip), each tab is its own page in a grid of cards instead of one long column, and
   sheets open as a panel from the right. Today: three columns from 1280px (numbers and aims;
   Recovery, Load, water and meals; what you burned), two below (the first two stacked). The phone
   (768px and under) is not touched; 769 to 1023px keeps the top bar and one column. */
@media (min-width:1024px){
  html[data-v4] body.app-page{padding-left:128px!important;padding-right:24px!important;padding-top:calc(76px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)))!important;}
  html[data-v4] .app-top-in,html[data-v4] .app-page:has(.td-cols) .app-top-in{height:64px!important;padding:0 28px 0 32px!important;}
  html[data-v4] .app-bar{top:50%!important;left:20px!important;bottom:auto!important;right:auto!important;transform:translateY(-50%)!important;
    flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;width:92px!important;height:auto!important;padding:10px 6px!important;gap:6px!important;
    border-radius:30px!important;background:var(--v-card)!important;box-shadow:var(--v-card-sh)!important;}
  html[data-v4="dark"] .app-bar{box-shadow:var(--v-card-sh),inset 0 0 0 1px rgba(255,255,255,.05)!important;}
  html[data-v4] .app-bar button:not(.app-plus){height:62px!important;padding:0 4px!important;border-radius:20px!important;flex-direction:column!important;gap:5px!important;
    font:600 11.5px/1.1 var(--v-font-b)!important;color:var(--ink2)!important;}
  html[data-v4] .app-bar button:not(.app-plus) svg{display:block!important;width:22px!important;height:22px!important;}
  html[data-v4] .app-bar button:not(.app-plus) span{max-width:100%;overflow:hidden!important;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px!important;letter-spacing:-.1px!important;}
  html[data-v4] .app-bar button.on:not(.app-plus){padding:0 4px!important;}
  html[data-v4] .app-bar .app-plus{order:-1!important;align-self:center;width:56px!important;height:56px!important;min-width:56px!important;margin:2px 0 8px!important;border-radius:20px!important;}
  html[data-v4] .app-bar .app-plus svg{width:24px!important;height:24px!important;}
  html[data-v4] .app-page .me-page,html[data-v4] .app-page .me-page:has(.td-cols){max-width:1360px!important;}
  html[data-v4] body.app-page .fu-toast{left:calc(50% + 52px)!important;}
  /* Today */
  html[data-v4] .td-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"a c" "b c";gap:0 18px;align-items:start;}
  html[data-v4] .td-col{display:flex;flex-direction:column;min-width:0;}
  html[data-v4] .td-col--a{grid-area:a;}
  html[data-v4] .td-col--b{grid-area:b;}
  html[data-v4] .td-col--c{grid-area:c;position:sticky;top:84px;}
  html[data-v4] .td-col>*{margin-top:0!important;margin-bottom:16px!important;}
  html[data-v4] .td-col--c .td-top{display:block!important;margin:0!important;}
  html[data-v4] .td-col--c .td-burn{max-height:calc(100vh - 104px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;}
  html[data-v4] .td-col .td-meals{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  html[data-v4] .td-col .td-water{grid-template-columns:minmax(0,1fr)!important;row-gap:14px!important;}
  html[data-v4] .td-col .td-water .td-cups{grid-column:1;grid-row:auto;}
  html[data-v4] .td-col .td-ins{grid-template-columns:minmax(0,1fr);}
  html[data-v4] .td-cols .td-hero{margin-bottom:16px!important;}
  /* Progress: the weigh-ins on the left (kept in view), the week, patterns and history on the right */
  html[data-v4] .app-tab[data-tab="progress"]:not([hidden]){display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:repeat(8,auto) 1fr;gap:0 18px;align-items:start;}
  html[data-v4] .app-tab[data-tab="progress"]>*{grid-column:2;min-width:0;}
  html[data-v4] .app-tab[data-tab="progress"]>.me-progress{grid-column:1;grid-row:1 / span 9;position:sticky;top:84px;margin-top:0!important;}
  html[data-v4] .app-tab[data-tab="progress"]>.ins-prog{margin-top:0;}
  html[data-v4] .app-tab[data-tab="progress"]>.me-hist{max-height:min(560px,70vh);overflow:auto;scrollbar-width:thin;padding-right:6px;}
  /* Coach: its sub-tabs swap the coach and the day's plan in place, so one centred column */
  html[data-v4] .app-tab[data-tab="coach"]:not([hidden]){max-width:980px;margin:0 auto;}
  /* Me: you across the top, your days on the left, the settings on the right */
  html[data-v4] .app-tab[data-tab="me"]:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0 18px;align-items:start;}
  html[data-v4] .app-tab[data-tab="me"]>*{min-width:0;}
  html[data-v4] .app-tab[data-tab="me"]>.me-head{grid-column:1 / -1;}
  html[data-v4] .app-tab[data-tab="me"]>.me-days{grid-column:1;position:sticky;top:84px;}
  html[data-v4] .app-tab[data-tab="me"]>.me-set{grid-column:2;}
  /* sheets: a panel from the right instead of from the bottom */
  html[data-v4] .fu-sheet{justify-content:flex-end!important;align-items:stretch!important;padding:16px!important;}
  html[data-v4] .fu-sheet-in{max-width:500px!important;width:min(500px,100%)!important;max-height:none!important;height:auto!important;border-radius:28px!important;animation:fu-v2-side .28s cubic-bezier(.2,.8,.2,1)!important;padding-bottom:0!important;}
  /* "+": a menu beside the rail */
  html[data-v4] .app-sheet{align-items:center!important;justify-content:flex-start!important;}
  html[data-v4] .app-sheet-in{width:320px!important;margin-left:124px!important;border-radius:26px!important;padding:14px!important;}
}
@media (min-width:1280px){
  html[data-v4] .td-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"a b c";}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){html[data-v4] .fu-sheet-in{animation:none!important;}}
@keyframes fu-v2-side{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}

/* ------------------------------------------------------------ 22. JOGO's Nov 9 look (Adriano approved, Nov 9)
   Fuel follows JOGO's "less is more" v4 (JOGO repo css/v4-shell.css sections 13-16, js/v4-chrome.js):
   a floating bar 12px in from the edges, icons only, the + flat inside it on the icons' line, a narrow
   centred pill while you read down; a header that stays and condenses; everything about 30% flatter;
   calm chrome (black, white, grey, ember for the one action) with the colour in the content (macros,
   rings, charts). Part of the v4 look itself (html[data-v4]); it was a preview behind ?look=fuelnext first,
   that link is gone. fuel-account.js sets html.fx-bar-sm and html.fx-top-sm as the page scrolls. */
html[data-v4][data-v4]{
  --v-o-grad:linear-gradient(160deg,#FF9A50 0%,#FF7A1A 48%,#EC6A0A 100%);
  --v-o-glow:inset 0 1px 0 rgba(255,255,255,.32),0 7px 15px -6px rgba(226,95,0,.49);
  --v-block:linear-gradient(180deg,#262628 0%,#19191A 100%);
  --v-block-sh:inset 0 1px 0 rgba(255,255,255,.063),0 15px 28px -9px rgba(0,0,0,.385),0 3px 7px rgba(0,0,0,.126);
  --v-bar:linear-gradient(180deg,#262628 0%,#1A1A1B 100%);
  --v-r-card:26px;
}
html[data-v4="dark"][data-v4]{
  --v-glow:radial-gradient(110% 60% at 82% -8%,rgba(255,122,26,.16) 0%,rgba(255,100,20,.05) 40%,rgba(14,13,12,0) 70%);
  --v-card:linear-gradient(180deg,#1D1C1B 0%,#191817 100%);
  --v-card-sh:inset 0 1px 0 rgba(255,255,255,.042),0 13px 28px -14px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.25);
  --v-glass-sh:inset 0 1px 0 rgba(255,255,255,.07),0 6px 13px -7px rgba(0,0,0,.42);
  /* the macros at JOGO's content strength (its win / blue / purple) */
  --prot:#22D97A!important; --carb:#4CA3FF!important; --fat:#A78BFA!important;
}
html[data-v4="light"][data-v4]{
  --v-glow:radial-gradient(120% 60% at 85% -6%,rgba(255,150,70,.5) 0%,rgba(255,122,26,.24) 30%,rgba(255,150,60,.08) 52%,rgba(232,230,225,0) 76%);
  --v-card:linear-gradient(180deg,#FFFFFF 0%,#FAF9F7 100%);
  --v-card-sh:inset 0 1px 0 rgba(255,255,255,.7),0 11px 22px -13px rgba(90,40,0,.21),0 1px 4px rgba(90,40,0,.042);
  --v-glass-sh:inset 0 1px 0 rgba(255,255,255,.6),0 6px 13px -7px rgba(90,40,0,.21);
  /* text colours that keep 4.5:1 on white and on the page (JOGO round 4 values) */
  --prot:#066B3C!important; --carb:#1A5FC4!important; --fat:#6239D9!important;
}
html[data-v4="dark"][data-v4] :is(.card,.ms-card,.ex-card,.pl-opt,.pc-opt,.h-stats,.tl-ex,.ob-goal,.ob-act,.acct-card){box-shadow:var(--v-card-sh),inset 0 0 0 1px rgba(255,255,255,.03)!important;}
/* the orange blocks and the dark blocks: their own depth, flatter */
html[data-v4][data-v4] :is(.td-hero,.pg-hero,.co-today,.tl-rest){
  background:radial-gradient(90% 90% at 100% 0%,rgba(255,226,190,.32) 0%,rgba(255,226,190,0) 55%),var(--v-o-grad)!important;
  border-radius:var(--v-r-card)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 15px 28px -12px rgba(226,95,0,.38)!important;}
html[data-v4][data-v4] .app-page :is(.me-head,.co-ci,.me-progress .stats){
  background:radial-gradient(90% 80% at 100% 0%,rgba(255,122,26,.17) 0%,rgba(255,122,26,0) 62%),var(--v-block)!important;border-radius:var(--v-r-card)!important;}
html[data-v4][data-v4] :is(.td-hero,.pg-hero,.co-today) .btn.btn.btn{box-shadow:0 6px 13px -6px rgba(0,0,0,.35)!important;}
html[data-v4][data-v4] .seg label:has(input:checked){box-shadow:inset 0 -1px 0 rgba(0,0,0,.05),0 4px 10px -5px rgba(0,0,0,.38)!important;}
html[data-v4][data-v4] .btn:hover{transform:none;}
/* calm chrome: you are a plain disc, as on JOGO (the ember stays for "+" and the main button) */
html[data-v4][data-v4] .app-av{background:var(--v-glass)!important;color:var(--ink)!important;border:1px solid var(--v-glass-line)!important;box-shadow:var(--v-glass-sh)!important;font-weight:600!important;}
html[data-v4="light"][data-v4] .app-av{background:#FFFFFF!important;border-color:rgba(20,20,20,.06)!important;}

/* the phone's tab bar */
@media (max-width:768px){
  html[data-v4][data-v4] .app-bar{left:12px!important;right:12px!important;bottom:calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)) + 12px)!important;
    height:58px!important;padding:6px!important;border-radius:999px!important;justify-content:space-around!important;align-items:center!important;gap:0!important;
    background:rgba(20,20,22,.9)!important;border:1px solid rgba(255,255,255,.09)!important;
    -webkit-backdrop-filter:blur(22px) saturate(170%)!important;backdrop-filter:blur(22px) saturate(170%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.056),0 13px 25px -10px rgba(0,0,0,.385),0 2px 7px rgba(0,0,0,.11)!important;
    transition:left .32s cubic-bezier(.32,1.2,.6,1),right .32s cubic-bezier(.32,1.2,.6,1),height .32s cubic-bezier(.32,1.2,.6,1),padding .32s cubic-bezier(.32,1.2,.6,1)!important;}
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){html[data-v4][data-v4] .app-bar{background:#1C1C1E!important;}}
  /* every icon on one line, in a 22px box; the names stay for screen readers (clipped), none shown */
  html[data-v4][data-v4] .app-bar button:not(.app-plus){position:relative!important;display:block!important;flex:1 1 0!important;min-width:0!important;height:44px!important;padding:0!important;
    background:none!important;box-shadow:none!important;border-radius:14px!important;color:#B5B5B9!important;transition:height .32s cubic-bezier(.32,1.2,.6,1)!important;}
  html[data-v4][data-v4] .app-bar button:not(.app-plus) svg{position:absolute!important;display:block!important;top:50%;left:50%;width:22px!important;height:22px!important;margin:-11px 0 0 -11px!important;
    stroke-width:1.75!important;color:inherit!important;transition:transform .3s cubic-bezier(.32,1.2,.6,1);}
  html[data-v4][data-v4] .app-bar button:not(.app-plus) span{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;max-width:none!important;
    overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;}
  html[data-v4][data-v4] .app-bar button.on:not(.app-plus){color:#FF8A33!important;background:none!important;box-shadow:none!important;padding:0!important;}
  html[data-v4][data-v4] .app-bar button.on:not(.app-plus) :is(svg,span){color:#FF8A33!important;}
  /* "+": a 36px rounded diamond inside the bar, on the icons' line; the whole 56 x 44px slot to tap */
  html[data-v4][data-v4] .app-bar .app-plus{position:relative!important;flex:0 0 56px!important;width:56px!important;min-width:56px!important;height:44px!important;padding:0!important;
    background:none!important;box-shadow:none!important;border-radius:14px!important;display:block!important;transition:flex-basis .32s ease,width .32s ease,min-width .32s ease,height .32s ease!important;}
  html[data-v4][data-v4] .app-bar .app-plus::before{left:50%!important;top:50%!important;width:36px!important;height:36px!important;margin:0!important;border-radius:12px!important;
    transform:translate(-50%,-50%) rotate(45deg)!important;box-shadow:var(--v-o-glow)!important;transition:width .32s cubic-bezier(.32,1.2,.6,1),height .32s cubic-bezier(.32,1.2,.6,1),border-radius .32s ease!important;}
  html[data-v4][data-v4] .app-bar .app-plus:active::before{transform:translate(-50%,-50%) rotate(45deg) scale(.92)!important;}
  html[data-v4][data-v4] .app-bar .app-plus svg{position:absolute!important;top:50%;left:50%;width:20px!important;height:20px!important;margin:-10px 0 0 -10px!important;stroke-width:2.2;}
  /* reading down: a narrow centred pill, smaller icons, the "+" with it; tabs stay 40px to tap */
  html[data-v4][data-v4].fx-bar-sm .app-bar{left:calc(50% - 115px)!important;right:calc(50% - 115px)!important;height:50px!important;padding:4px!important;}
  html[data-v4][data-v4].fx-bar-sm .app-bar button:not(.app-plus){height:40px!important;}
  html[data-v4][data-v4].fx-bar-sm .app-bar button:not(.app-plus) svg{transform:scale(.86);}
  html[data-v4][data-v4].fx-bar-sm .app-bar .app-plus{flex:0 0 46px!important;width:46px!important;min-width:46px!important;height:40px!important;}
  html[data-v4][data-v4].fx-bar-sm .app-bar .app-plus::before{width:32px!important;height:32px!important;border-radius:11px!important;}
  html[data-v4][data-v4].fx-bar-sm .app-bar .app-plus svg{width:18px!important;height:18px!important;margin:-9px 0 0 -9px!important;}
  html[data-v4][data-v4] .app-page{padding-bottom:calc(58px + 12px + 28px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important;}
  html[data-v4][data-v4] .fu-toast{bottom:calc(58px + 12px + 14px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))!important;}

  /* the header: it stays; below the top of a page it condenses to 50px, solid page colour */
  html[data-v4][data-v4] .app-top-in{transition:height .26s cubic-bezier(.2,.8,.2,1)!important;}
  html[data-v4][data-v4] .app-brand{transition:transform .26s cubic-bezier(.2,.8,.2,1);transform-origin:0 50%;}
  html[data-v4][data-v4] :is(.app-av,.app-jogo){transition:width .26s ease,height .26s ease!important;}
  html[data-v4][data-v4].fx-top-sm .app-top{background:var(--v-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--line)!important;}
  html[data-v4][data-v4].fx-top-sm .app-top-in{height:50px!important;}
  html[data-v4][data-v4].fx-top-sm .app-brand{transform:scale(.86);}
  html[data-v4][data-v4].fx-top-sm .app-jogo{height:40px!important;}
  html[data-v4][data-v4].fx-top-sm .app-av{width:40px!important;height:40px!important;}
  /* the Coach's sub-tabs stick under the header (their top was 0: hidden behind it) */
  html[data-v4][data-v4] .co-tabs{top:calc(64px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));transition:top .26s cubic-bezier(.2,.8,.2,1);}
  html[data-v4][data-v4].fx-top-sm .co-tabs{top:calc(50px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));}
}
/* the Coach's sub-tabs under the header on wider screens too: 769 to 1023px the top bar is 72px, from 1024px
   64px, each with its 1px line (sections 19 and 21) */
@media (min-width:769px) and (max-width:1023px){html[data-v4][data-v4] .co-tabs{top:calc(73px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));}}
@media (min-width:1024px){html[data-v4][data-v4] .co-tabs{top:calc(65px + var(--safe-area-inset-top,env(safe-area-inset-top,0px)));}}
@media (max-width:768px) and (prefers-reduced-motion:reduce){
  html[data-v4][data-v4] :is(.app-bar,.app-bar button,.app-bar svg,.app-bar .app-plus,.app-top-in,.app-brand,.app-av,.app-jogo,.co-tabs){transition:none!important;}
  html[data-v4][data-v4] .app-bar .app-plus::before{transition:none!important;}
}
/* a computer: the rail keeps its place, with the cards' radius and the flatter depth */
@media (min-width:1024px){
  html[data-v4][data-v4] .app-bar{border-radius:26px!important;}
  html[data-v4][data-v4] .app-bar .app-plus{border-radius:18px!important;box-shadow:var(--v-o-glow)!important;}
  html[data-v4][data-v4] .fu-sheet-in{border-radius:26px!important;}
}

/* ------------------------------------------------------------ 23. ship pass (Nov 9): a tighter bar, the slim
   "kcal left" block, signed numbers in colour, contrast */
/* the phone's bar: centred and about 312px wide, so the icons sit closer (JOGO gets the same); 44px slots;
   the small pill while reading down is 216px (four 40px tabs and the 46px "+") */
@media (max-width:768px){
  html[data-v4][data-v4] .app-bar{left:max(12px,calc(50% - 156px))!important;right:max(12px,calc(50% - 156px))!important;}
  html[data-v4][data-v4] .app-bar .app-plus{flex:0 0 52px!important;width:52px!important;min-width:52px!important;}
  html[data-v4][data-v4].fx-bar-sm .app-bar{left:calc(50% - 108px)!important;right:calc(50% - 108px)!important;}
  html[data-v4][data-v4].fx-bar-sm .app-bar .app-plus{flex:0 0 46px!important;width:46px!important;min-width:46px!important;}
}
/* the "kcal left" block, slimmer, as JOGO's yellow tops: less padding, a calmer flat ember, the number
   still the biggest thing, eaten / target beside it, protein, carbs and fat as one compact row */
html[data-v4][data-v4] .td-hero{padding:16px 18px 14px!important;gap:10px!important;
  background:linear-gradient(160deg,#FF8E3C 0%,#FF7A1A 55%,#F4700F 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -14px rgba(226,95,0,.42)!important;}
html[data-v4][data-v4] .td-hero .td-kch{flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-end!important;justify-content:space-between!important;gap:4px 12px!important;}
html[data-v4][data-v4] .td-hero .td-kch>p:first-child b{font-size:clamp(48px,14vw,60px)!important;letter-spacing:-2px!important;line-height:.92!important;}
html[data-v4][data-v4] .td-hero .td-kch>p:first-child span{font-size:14px!important;}
html[data-v4][data-v4] .td-hero .td-kof{margin:0 0 4px!important;font-size:13px!important;}
html[data-v4][data-v4] .td-hero .td-kbar{height:8px!important;}
html[data-v4][data-v4] .td-hero .td-macs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;margin-top:2px;}
html[data-v4][data-v4] .td-hero .td-mac{padding:0!important;gap:3px!important;background:none!important;box-shadow:none!important;border-radius:0!important;}
html[data-v4][data-v4] .td-hero .td-mac span{font-size:12px!important;}
html[data-v4][data-v4] .td-hero .td-mac em{font:500 15px/1.15 var(--v-font)!important;letter-spacing:-.1px!important;}
html[data-v4][data-v4] .td-hero .td-mac i{height:4px!important;background:rgba(20,20,20,.14)!important;}
html[data-v4][data-v4] .td-hero .td-mac i s{background:#141414!important;}
@media (max-width:360px){html[data-v4][data-v4] .td-hero .td-mac em{font-size:13.5px!important;}}

/* signed numbers (fuel-account.js tone / fillT): green when it is good for your goal, red when it is not,
   plain on target. JOGO's tokens: 4.5:1 or more on the cards and the page in both themes. */
html[data-v4="light"] :is(.sg-good){color:#066B3C!important;font-weight:600;}
html[data-v4="light"] :is(.sg-bad){color:#B8232A!important;font-weight:600;}
html[data-v4="dark"] :is(.sg-good){color:#22D97A!important;font-weight:600;}
html[data-v4="dark"] :is(.sg-bad){color:#FF4D4D!important;font-weight:600;}
/* inside the always-dark blocks the dark values, on the ember blocks plain dark ink */
html[data-v4] .app-page :is(.me-head,.co-ci,.me-progress .stats) .sg-good{color:#22D97A!important;}
html[data-v4] .app-page :is(.me-head,.co-ci,.me-progress .stats) .sg-bad{color:#FF4D4D!important;}
html[data-v4] :is(.td-hero,.pg-hero,.co-today,.tl-rest) :is(.sg-good,.sg-bad){color:#141414!important;}
/* the weight's direction on Progress: the arrow green or red on its dark pill */
html[data-v4] .pg-dir.good svg{color:#22D97A!important;}
html[data-v4] .pg-dir.bad svg{color:#FF4D4D!important;}
/* contrast (measured, Nov 9): the muted ink on the ember blocks, the small source tags, Zones, a coach note */
html[data-v4][data-v4] :is(.td-hero,.pg-hero,.co-today) :is(.eyebrow,.note,.td-kof,.td-mac em,.unit,small,.td-mac span){color:rgba(20,20,20,.88)!important;}
html[data-v4][data-v4] .td-hero .td-kch>p:first-child span,html[data-v4][data-v4] :is(.pg-hero,.co-today) :is(span,small,em){color:rgba(20,20,20,.88)!important;}
html[data-v4="light"] .td-src.h{color:#A8123A!important;}
html[data-v4="light"] .td-src.p{color:#6E4B00!important;}
html[data-v4="light"] .td-hrz,html[data-v4="light"] .td-hrz *{color:#B8232A!important;}
html[data-v4="light"] .tr-cnote{color:var(--ember-ink)!important;}
html[data-v4="dark"] .td-hrz,html[data-v4="dark"] .td-hrz *{color:#FF6B6B!important;}
/* a computer: the lit tab is the dark (light theme) or white (dark theme) chip, its icon in the chip ink (it was #141414 on #141414: invisible in light) */
@media (min-width:769px){html[data-v4][data-v4] .app-bar button.on:not(.app-plus) svg{color:var(--v-chip-on-ink)!important;}}

/* ------------------------------------------------------------ 24. signed-out pages, calm (Nov 9 2026)
   The sign-in page (.acct-page) and the landing (body.landing, LOOK_KEYS 'home') in the same calm look as
   JOGO's css/v4-public.css: a flat page, bold tight headings, flat buttons and fields at 14px corners,
   flat cards with one line, the one main action in ember. No glows, no moving strip, no step numbers.
   Copy, links, the language menu and the store badges are untouched. */
html[data-v4]{--p-r:14px;--p-rc:20px;--p-line:rgba(20,20,20,.09);--p-line2:rgba(20,20,20,.16);--p-s:#FFFFFF;--p-s2:#EFEDE8;--p-bg:#F5F4F0;--p-t1:#141414;--p-t2:#4A4A4E;--p-t3:#66666B;--p-acc:#141414;--p-mark:rgba(255,122,26,.55);}
html[data-v4="dark"]{--p-line:rgba(255,255,255,.09);--p-line2:rgba(255,255,255,.18);--p-s:#1A1918;--p-s2:#232221;--p-bg:#0E0D0C;--p-t1:#F5F3EF;--p-t2:#BDBAB4;--p-t3:#A3A09A;--p-acc:#FF9A4D;--p-mark:transparent;}
html[data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)){background:var(--p-bg)!important;background-image:none!important;}
html[data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page))::before{display:none!important;}
html[data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top{background:color-mix(in srgb,var(--p-bg) 92%,transparent)!important;border-bottom:1px solid var(--p-line)!important;}
/* headings: one weight, tight */
html[data-v4][data-v4] :is(.landing,.acct-page) h1{font:600 clamp(42px,10vw,80px)/1.02 var(--v-font)!important;letter-spacing:-.04em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4] .acct-page .hero h1{font-size:clamp(32px,7.6vw,44px)!important;letter-spacing:-.03em!important;}
html[data-v4][data-v4] .landing :is(.L-h2,h2){font:600 clamp(30px,6.4vw,50px)/1.06 var(--v-font)!important;letter-spacing:-.035em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4] .landing h3{font:600 19px/1.25 var(--v-font)!important;letter-spacing:-.01em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4] .landing .L-acc{width:fit-content!important;color:var(--p-acc)!important;background:linear-gradient(transparent 64%,var(--p-mark) 64%,var(--p-mark) 92%,transparent 92%)!important;-webkit-text-fill-color:currentColor!important;}
html[data-v4][data-v4] :is(.landing,.acct-page) :is(.L-sub,.L-lede,.lede){color:var(--p-t2)!important;font:400 clamp(16px,2.2vw,19px)/1.55 var(--v-font)!important;}
html[data-v4][data-v4] :is(.landing,.acct-page) :is(.L-k,.L-kick,.eyebrow){font:600 13px var(--v-font)!important;color:var(--p-t3)!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
html[data-v4][data-v4] .landing .L-kick::before{display:none!important;}
/* buttons and fields: flat, 14px corners, 52px */
html[data-v4][data-v4][data-v4] :is(.landing,.acct-page) .btn{border-radius:var(--p-r)!important;min-height:52px;box-shadow:none!important;transform:none!important;font:600 16px var(--v-font)!important;}
html[data-v4][data-v4][data-v4] :is(.landing,.acct-page) .btn:not(:is(.ghost,.sec,.secondary,.link,.acct-apple)){background:#FF7A1A!important;background-image:none!important;color:#141414!important;}
html[data-v4][data-v4][data-v4] :is(.landing,.acct-page) .btn:is(.ghost,.sec,.secondary){background:var(--p-s)!important;border:1px solid var(--p-line2)!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] .acct-page :is(input[type=email],input[type=password],input[type=text]){height:52px!important;border-radius:var(--p-r)!important;background:var(--p-s)!important;border:1px solid var(--p-line2)!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] .acct-page .acct-card{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
html[data-v4][data-v4][data-v4] .acct-page .seg{border-radius:var(--p-r)!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] .acct-page .seg :is(button,a){border-radius:10px!important;}
/* cards: flat, one line */
html[data-v4][data-v4] .landing :is(.L-card,.L-f,.L-steps li,.L-calcs a){background:var(--p-s)!important;background-image:none!important;border:1px solid var(--p-line)!important;border-radius:var(--p-rc)!important;box-shadow:none!important;backdrop-filter:none!important;}
html[data-v4][data-v4] .landing :is(.L-fi,.L-ci){background:var(--p-s2)!important;box-shadow:none!important;border:0!important;border-radius:12px!important;}
html[data-v4][data-v4] .landing :is(.L-marq,.L-fn){display:none!important;}
html[data-v4][data-v4] .landing .L-f h3{margin-top:14px!important;}
/* sections: one rhythm, no tinted bands */
html[data-v4][data-v4] .landing :is(.L-hero,.L-sec){background:transparent!important;background-image:none!important;border:0!important;}
html[data-v4][data-v4] .landing :is(.L-band,.L-sec){padding-top:clamp(56px,9vw,112px)!important;padding-bottom:0!important;}
html[data-v4][data-v4] .landing :is(.L-hero)::before,html[data-v4][data-v4] .landing :is(.L-hero)::after{display:none!important;}
/* the numbers: plain */
html[data-v4][data-v4] .landing .L-stats > div{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;text-align:left!important;}
html[data-v4][data-v4] .landing .L-stats b{font:600 clamp(32px,6vw,48px)/1 var(--v-font)!important;letter-spacing:-.03em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4] .landing .L-stats span{font:500 13px var(--v-font)!important;color:var(--p-t3)!important;}
html[data-v4][data-v4] .landing .L-stats{gap:28px 20px!important;padding-top:24px!important;}
/* store badges: black */
html[data-v4][data-v4] .landing .L-store{border-radius:12px!important;box-shadow:none!important;}
/* "Works with JOGO": one dark block in both themes, JOGO's yellow as its accent */
html[data-v4][data-v4][data-v4] .landing .L-band{background:#141414!important;background-image:none!important;margin-top:clamp(56px,9vw,112px)!important;padding-block:clamp(48px,8vw,96px)!important;}
html[data-v4][data-v4][data-v4] .landing .L-band::before{display:none!important;}
html[data-v4][data-v4][data-v4] .landing .L-band :is(h2,.L-h2,h3){color:#F5F3EF!important;}
html[data-v4][data-v4][data-v4] .landing .L-band .L-acc{color:#FFD21F!important;background:none!important;}
html[data-v4][data-v4][data-v4] .landing .L-band :is(.L-lede,.L-check,.L-check li,.L-web,.L-web a){color:#BDBAB4!important;}
html[data-v4][data-v4][data-v4] .landing .L-band .L-k{color:#A3A09A!important;}
html[data-v4][data-v4][data-v4] .landing .L-band .L-card{background:#1E1D1C!important;border-color:rgba(255,255,255,.09)!important;}
html[data-v4][data-v4][data-v4] .landing .L-band .L-card :is(p,span,em,b){color:#F5F3EF!important;}
html[data-v4][data-v4][data-v4] .landing .L-band .L-card :is(em,.L-ct){color:#A3A09A!important;}
html[data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .acct{box-shadow:none!important;border-radius:12px!important;background:#FF7A1A!important;background-image:none!important;color:#141414!important;}
/* 24b. the header: the same floating pill as JOGO at every width (sign-in + landing). 12px in on a phone
   (56px: the F + wordmark, EN and Start), 24px in from 769px (64px, the links too). It sticks 10px from
   the top once the JOGO strip above it has scrolled away. */
html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top{position:sticky!important;top:calc(10px + env(safe-area-inset-top,0px))!important;margin:10px 12px 0!important;
  border-radius:999px!important;border:1px solid var(--p-line)!important;background:var(--p-s)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 10px 28px -16px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.06)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top{background:#161514!important;}
html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .wrap{min-height:56px!important;max-width:none!important;padding:0 6px 0 16px!important;gap:10px!important;}
html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .nav-right{gap:6px!important;}
html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .acct{min-height:44px!important;display:inline-flex!important;align-items:center!important;padding:0 18px!important;border-radius:999px!important;font:600 15px var(--v-font)!important;letter-spacing:0!important;text-transform:none!important;}
html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .langs summary{min-height:44px!important;display:flex!important;align-items:center!important;border-radius:999px!important;}
@media (min-width:769px){
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top{margin:10px 24px 0!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .wrap{min-height:64px!important;padding:0 10px 0 22px!important;gap:24px!important;}
}
/* 24c. a phone: the F, the wordmark, the language and Start fit in the bar in every language */
@media (max-width:440px){
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .wrap{padding:0 5px 0 12px!important;gap:6px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .brand{gap:8px!important;min-width:0!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .brand .lockup.sm{--h:14px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .nav-right{gap:4px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .acct{padding:0 14px!important;}
}
/* 24d. the bar's right side sits at the end of the pill on every page (a phone left a gap after Start) */
html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .nav-right{margin-left:auto!important;}
/* ------------------------------------------------------------ 25. every other public page (Nov 9 2026)
   The calculators, foods, sports, exercises, support, privacy and the 404 (body.pub, build.mjs PUB_KEYS) in
   the same calm look as the landing: the floating pill header (24b), bold tight headings, flat cards and
   tiles with one line, flat fields at 14px corners, ember for the one main action, plain tables, a quiet
   footer. Markup, links, the calculators and the SEO markup are untouched. */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main h1{font:600 clamp(34px,7.4vw,58px)/1.04 var(--v-font)!important;letter-spacing:-.035em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main h2{font:600 clamp(23px,4vw,30px)/1.15 var(--v-font)!important;letter-spacing:-.025em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main h3{font:600 18px/1.3 var(--v-font)!important;letter-spacing:-.01em!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(.eyebrow,.L-k){font:600 13px var(--v-font)!important;color:var(--p-t3)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .lede{font:400 clamp(16px,2vw,19px)/1.55 var(--v-font)!important;color:var(--p-t2)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(.crumbs,.crumbs a){font:500 13px var(--v-font)!important;color:var(--p-t3)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(.note,.muted,.sources,.unit){color:var(--p-t3)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(.prose p,.prose li,.faq p){color:var(--p-t2)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(.prose,.faq,.note,.sources) a{color:var(--p-t1)!important;text-decoration:underline!important;text-decoration-color:var(--p-line2)!important;text-underline-offset:3px;}
/* cards, tiles, chips: flat, one line */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(.card,.tile,.ex-card){background:var(--p-s)!important;background-image:none!important;border:1px solid var(--p-line)!important;border-radius:var(--p-rc)!important;box-shadow:none!important;transform:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .tile b{font:600 16px/1.3 var(--v-font)!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .tile :is(span,p){color:var(--p-t3)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .tile:hover{border-color:var(--p-line2)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .chip{background:var(--p-s)!important;border:1px solid var(--p-line)!important;border-radius:999px!important;box-shadow:none!important;color:var(--p-t1)!important;font:500 14px var(--v-font)!important;transform:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .chip:hover{border-color:var(--p-line2)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .stat{background:var(--p-s2)!important;border:0!important;border-radius:16px!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .stat :is(span,small,em){font-family:var(--v-font)!important;color:var(--p-t3)!important;}
/* buttons and fields */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .btn{border-radius:var(--p-r)!important;min-height:48px;box-shadow:none!important;transform:none!important;font:600 16px var(--v-font)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .btn:not(:is(.ghost,.sec,.secondary,.link)){background:#FF7A1A!important;background-image:none!important;color:#141414!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .btn:is(.ghost,.sec,.secondary){background:var(--p-s)!important;border:1px solid var(--p-line2)!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(input[type=number],input[type=text],input[type=email],input:not([type]),select){height:52px!important;border-radius:var(--p-r)!important;background:var(--p-s)!important;border:1px solid var(--p-line2)!important;box-shadow:none!important;color:var(--p-t1)!important;font:500 16px var(--v-font)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .card :is(input[type=number],input[type=text],input:not([type]),select){background:var(--p-bg)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main label{color:var(--p-t2)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .seg{background:var(--p-s2)!important;border-radius:var(--p-r)!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .seg label{border-radius:10px!important;font:600 14px var(--v-font)!important;color:var(--p-t2)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .seg label:has(input:checked){background:var(--p-s)!important;color:var(--p-t1)!important;box-shadow:0 1px 3px rgba(0,0,0,.12)!important;}
/* tables: plain rows */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .tablewrap{border:1px solid var(--p-line)!important;border-radius:var(--p-rc)!important;background:var(--p-s)!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main table.nut :is(th,td){border-color:var(--p-line)!important;font-family:var(--v-font)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main table.nut th{font:600 13px var(--v-font)!important;color:var(--p-t3)!important;background:transparent!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main table.nut td{color:var(--p-t1)!important;}
/* the FAQ: lines, no boxes */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .faq details{border-color:var(--p-line)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .faq summary{font:600 16px/1.4 var(--v-font)!important;color:var(--p-t1)!important;}
/* the app pitch block: the same dark block as the landing's "Works with JOGO" */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .L-up{background:#141414!important;background-image:none!important;border-radius:var(--p-rc)!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .L-up::before{display:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .L-up :is(h2,h3,b){color:#F5F3EF!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .L-up :is(p,span,em,li,.L-k){color:#BDBAB4!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .L-up .L-upc{background:#1E1D1C!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;box-shadow:none!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .L-up .L-fi{background:#2A2928!important;box-shadow:none!important;border:0!important;}
/* the footer: quiet */
html[data-v4][data-v4][data-v4] body:is(.pub,.landing) footer{background:transparent!important;border-top:1px solid var(--p-line)!important;color:var(--p-t3)!important;}
html[data-v4][data-v4][data-v4] body:is(.pub,.landing) footer b{font:600 13px var(--v-font)!important;color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body:is(.pub,.landing) footer a{color:var(--p-t2)!important;font-family:var(--v-font)!important;}
html[data-v4][data-v4][data-v4] body:is(.pub,.landing) footer a:hover{color:var(--p-t1)!important;}
html[data-v4][data-v4][data-v4] body:is(.pub,.landing) footer .fine{color:var(--p-t3)!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main table.nut :is(th,td):first-child{padding-left:16px!important;}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main table.nut :is(th,td):last-child{padding-right:16px!important;}
/* 25b. narrow phones (360px and under): the long Start words (Commencer, Comenzar) stay inside the pill */
@media (max-width:380px){
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .brand .lockup.sm{--h:11px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .brand{gap:6px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .acct{padding:0 12px!important;font-size:14px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .langs summary{padding:7px 22px 7px 9px!important;}  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .langs summary:after{right:8px!important;}
}
/* the units and sex switches never push a calculator wider than a 320px phone (Italian, Dutch) */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .seg label{min-width:0!important;overflow-wrap:anywhere;}
@media (max-width:380px){html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .seg label{padding:9px 4px!important;font-size:13px!important;}html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .calc .card{padding-inline:16px!important;}}
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main .seg label span{color:inherit!important;}
/* long words in headings (Dutch, Finnish, German) wrap instead of running off a phone; anchors land below the floating header */
html[data-v4][data-v4][data-v4] body.pub:not(.landing):not(:has(.acct-page)) main :is(h1,h2,h3){overflow-wrap:anywhere;hyphens:auto;}
html[data-v4][data-v4][data-v4] body:is(.pub,.landing) :is([id],a[name]){scroll-margin-top:calc(90px + env(safe-area-inset-top,0px));}
/* 320px phones: Commencer, Comenzar and the language arrow all fit */
@media (max-width:340px){
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .brand .lockup.sm{--h:10px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .acct{padding:0 10px!important;font-size:13px!important;}
  html[data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top .wrap{padding-left:10px!important;}
}

/* ============================================================================
   26. DARK, INSTAGRAM STYLE (Nov 9 2026). Adriano picked this for JOGO (css/v4-shell.css section 20,
   from Documents/JOGA/reports/JOGO v4 - dark depth + light contrast (Nov 9 2026).pdf) and asked for
   the same in Fuel. A black page; cards dissolve into it (space + hairlines); tiles, the dark block
   and the tab bar one step up (#121212); sheets and fields two steps up (#1C1C1E). No page glow, no
   orange glow, no drop shadows, no glass blur; softer greys for secondary text; chips quiet unless
   picked. Ember stays on the one main action and on the "kcal left" block; the content colour
   (macros, rings, charts, green and red numbers) is kept. Light mode untouched.
   ========================================================================= */
/* 26a. tokens */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4]{
  --v-bg:#000000; --v-glow:none;
  --v-card:transparent; --v-card-sh:none; --v-sheet:#1C1C1E;
  --v-glass:rgba(255,255,255,.09); --v-glass-line:transparent; --v-glass-sh:none;
  --v-field:#1C1C1E; --v-field-sh:none;
  --v-block:#121212; --v-block-sh:none; --v-bar:#121212;
  --v-o-glow:none; --v-line-hi:rgba(255,255,255,.22); --v-overlay:rgba(0,0,0,.6);
  --bg:#000000!important; --s1:#121212!important; --s2:#1C1C1E!important; --line:rgba(255,255,255,.09)!important;
  --ink:#F5F5F5!important; --ink2:#A8A8A8!important; --muted:#8E8E8E!important;
  --p-bg:#000000; --p-s:#121212; --p-s2:#1C1C1E; --p-line:rgba(255,255,255,.09); --p-line2:rgba(255,255,255,.16);
  --p-t1:#F5F5F5; --p-t2:#A8A8A8; --p-t3:#8E8E8E;
}
/* 26b. the page and the chrome */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4]{background:#000000!important;background-image:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-top.scrolled{background:#000000!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid var(--line)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.app-av,.app-jogo){background:rgba(255,255,255,.09)!important;color:#F5F5F5!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-bar{background:#121212!important;border:1px solid var(--line)!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.on):not(.app-plus){color:#A8A8A8!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-bar button.on{box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-bar .app-plus{box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-bar .app-plus::before{background:#FF7A1A!important;box-shadow:none!important;}
@media (min-width:769px){html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-bar .app-plus{background:#FF7A1A!important;}}
/* 26c. cards dissolve: no fill, no frame, a hairline under each; tiles one step up */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page :is(.card,.acct-card,.h-stats):not(:is(.td-hero,.pg-hero,.co-today,.tl-rest,.me-head,.co-ci)){background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important;border-bottom:1px solid var(--line)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page :is(.ms-card,.ex-card,.pl-opt,.pc-opt,.tl-ex,.ob-goal,.ob-act,.stat,.td-next,.pk-bar,.tr-card,.tr-rest,.dy-take){background:#121212!important;border:0!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page :is(.ob-goal,.ob-act,.pc-opt,.pl-opt):has(input:checked){box-shadow:inset 0 0 0 2px var(--ember)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page :is(.td-meal.now,.td-meal[open].now){box-shadow:inset 3px 0 0 var(--ember)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .me-empty{border-color:rgba(255,255,255,.16)!important;}
/* 26d. the signature blocks: the ember "kcal left" block flat, the dark blocks one step up */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.td-hero,.pg-hero,.co-today,.tl-rest){background:#FF7A1A!important;background-image:none!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.td-hero,.pg-hero,.co-today) .btn.btn.btn{box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page :is(.me-head,.co-ci,.me-progress .stats){background:#121212!important;background-image:none!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page .me-progress .stats .stat:not(:first-child){background:#1C1C1E!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page .me-head .me-av{background:#FF7A1A!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-page .co-ci .btn{background:#FF7A1A!important;box-shadow:none!important;}
/* 26e. chips, segments, buttons, round icons: flat; chips quiet unless picked */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .chip:not(:is(.on,[aria-pressed="true"])){background:transparent!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important;color:#F5F5F5!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.chip.on,.chip[aria-pressed="true"]){box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .seg{background:#1C1C1E!important;border:0!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .seg label:has(input:checked){background:#F5F5F5!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .btn:not(:is(.ghost,.sec,.secondary,.link,.acct-apple,.acct-google,.fu-dlg-danger)):not(:is(.td-hero,.pg-hero,.co-today,.tl-rest) *){background:#FF7A1A!important;background-image:none!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .btn:is(.ghost,.sec,.secondary){background:#1C1C1E!important;border:0!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.td-nav,.me-ic,.fu-shx,.chip-x,.td-x,.ph-nav,.dy-step,.tr-week button,.dy-d.has){background:#1C1C1E!important;border:0!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .tr-week button[aria-selected="true"]{background:#F5F5F5!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .dy-d.now{background:#FF7A1A!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.ms-row>em:not(.ms-on),.td-next em){background:#1C1C1E!important;border:0!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .ms-sw input:checked{background:#FF7A1A!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .td-burn li.td-eff button[aria-pressed="true"]{background:#FF7A1A!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .pk-snap{background:#FF7A1A!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.td-eff div,.pg-rng,.tl-set){background:#1C1C1E!important;box-shadow:none!important;}
/* 26f. fields: two steps up, no frame until focused */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea){background:#1C1C1E!important;border:1px solid transparent!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea):focus{border-color:var(--ember)!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.seg input,.ms-sw input){border:0!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .ms-sw input:not(:checked){background:#3A3A3C!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.fu-sheet-in,.app-sheet-in,.fu-dlg-in) .ms-sw input:not(:checked){background:#545458!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .ms-sw input:focus-visible{outline:2px solid #FF7A1A!important;outline-offset:2px!important;}
/* 26g. sheets, dialogs, toasts: two steps up, no blur */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.app-sheet,.fu-sheet){-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.app-sheet-in,.fu-sheet-in){background:#1C1C1E!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-sheet-in button:not(.app-x):not([data-do="photo"]){background:#2C2C2E!important;border:0!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .app-sheet-in button[data-do="photo"]{background:#FF7A1A!important;background-image:none!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.fu-sheet-in,.app-sheet-in,.fu-dlg-in,.tl-set) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea,.btn:is(.ghost,.sec,.secondary),.td-nav,.me-ic,.chip-x,.td-x,.stat,.ms-card){background:#2C2C2E!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .fu-toast{background:#2C2C2E!important;border:0!important;box-shadow:none!important;}
/* 26h. signed-out and public pages: the pill header and the blocks one step up, flat */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)){background:#000000!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body:is(.landing,.pub,:has(.acct-page)) .top{background:#121212!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .L-up{background:#121212!important;border:1px solid var(--p-line)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .L-up .L-upc{background:#1C1C1E!important;border:0!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .L-up .L-fi{background:#2C2C2E!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .seg label:has(input:checked){background:#2C2C2E!important;color:#F5F5F5!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .seg label:has(input:checked) *{color:#F5F5F5!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .acct-page .seg label:has(input:checked){background:#2C2C2E!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .acct-page .seg label:has(input:checked) *{color:#F5F5F5!important;}
/* 26i. the in-app dialogs: two steps up, flat, no blur */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .fu-dlg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .fu-dlg-in{background:#1C1C1E!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .fu-dlg-in .btn:is(.ghost,.sec,.secondary){background:#2C2C2E!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .fu-dlg-b .btn.fu-dlg-danger{background:#D63A4E!important;box-shadow:none!important;}
/* 26j. review fixes: the quiet chips on public pages keep a hover line; the app pitch cards in the page greys */
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .chip:not(:is(.on,[aria-pressed="true"])):hover{border-color:rgba(255,255,255,.28)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] body.pub main .L-up .L-upc :is(p,span,em,small,li){color:#A8A8A8!important;}

/* Liquid glass tab bar (Nov 11 2026, his pick of three samples): clear, not frosted. A light 3px blur, almost no tint,
   and the glass read from rim light (top-left bright, bottom-right softer) and a soft inner glow; each icon carries a
   faint halo so it reads over whatever passes under. Phones only; "Reduce transparency" gets a solid bar. */
@media (max-width:768px){
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar{background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.09) 55%,rgba(255,255,255,.17))!important;
    -webkit-backdrop-filter:blur(3px) saturate(140%) brightness(1.05) contrast(1.04)!important;backdrop-filter:blur(3px) saturate(140%) brightness(1.05) contrast(1.04)!important;
    border:1px solid rgba(255,255,255,.55)!important;
    box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.95),inset -1px -1px 0 -.5px rgba(255,255,255,.7),inset 0 0 14px rgba(255,255,255,.35),
      inset 0 -10px 18px -12px rgba(255,255,255,.6),0 0 0 .5px rgba(0,0,0,.1),0 10px 28px -10px rgba(0,0,0,.3)!important;}
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.app-plus){color:#2A2A2E!important;filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 1px rgba(255,255,255,.9));}
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button.on:not(.app-plus){color:#B84A00!important;}
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button.on:not(.app-plus) :is(svg,span){color:#B84A00!important;}
  html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02) 55%,rgba(255,255,255,.07)),rgba(10,10,12,.24)!important;
    -webkit-backdrop-filter:blur(3px) saturate(135%) brightness(.85) contrast(1.04)!important;backdrop-filter:blur(3px) saturate(135%) brightness(.85) contrast(1.04)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    box-shadow:inset 1.5px 1.5px 0 -.5px rgba(255,255,255,.55),inset -1px -1px 0 -.5px rgba(255,255,255,.3),inset 0 0 14px rgba(255,255,255,.08),0 10px 28px -10px rgba(0,0,0,.6)!important;}
  html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.app-plus){color:#E6E6EA!important;filter:drop-shadow(0 0 3px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.8));}
  html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar button.on:not(.app-plus){color:#FF8A33!important;}
  html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar button.on:not(.app-plus) :is(svg,span){color:#FF8A33!important;}
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar{background:#F4F4F6!important;}
    html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar{background:#1C1C1E!important;}
  }
}
@media (max-width:768px) and (prefers-reduced-transparency:reduce){
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar{background:#F4F4F6!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar{background:#1C1C1E!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.app-plus),html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.app-plus){filter:none;}
}

@media (max-width:768px){
  /* the lit tab: a soft glass capsule behind it, iOS-style; the others a shade lighter so the pick reads at a glance */
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.app-plus){color:#4A4A50!important;}
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button.on:not(.app-plus){background:rgba(20,20,22,.075)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 .5px rgba(0,0,0,.05)!important;}
  html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4] .app-bar button.on:not(.app-plus){background:rgba(255,255,255,.12)!important;border-radius:999px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;}
}
@media (max-width:768px) and (prefers-reduced-transparency:reduce){
  html[data-v4="light"][data-v4][data-v4][data-v4][data-v4] .app-bar button:not(.app-plus){color:#2A2A2E!important;}
}

/* ------------------------------------------------------------ 27. Trainer view (Nov 11 2026)
   fuel-trainer.js's screens in the v4 look: the cards as the app's cards, the chips as the v4 chips,
   and in dark (section 26) dissolved into hairlines like every other card, tiles one step up. */
html[data-v4] :is(.tv-card,.tv-cd,.tv-list,.tv-sum>div,.tv-stat,.tv-wiz,.tv-bars,.tv-wtc,.tv-mt){border-radius:var(--v-r-row)!important;}
html[data-v4] .tv-head h1,html[data-v4] .tv-chead h1{font-family:'V4 Display',var(--v-font)!important;font-weight:500!important;letter-spacing:-.6px!important;}
html[data-v4] :is(.tv-mini,.tv-tg,.tv-wiz p,.tv-who,.tv-f,.tv-ta){font-family:var(--v-font);}
html[data-v4] .tv-mini.on{background:var(--ember)!important;color:var(--on-ember)!important;border-color:transparent!important;}
html[data-v4] :is(.tv-tabs,.tv-chips) :is(.chip.on,.chip[aria-pressed="true"]){background:var(--v-chip-on)!important;color:var(--v-chip-on-ink)!important;}
html[data-v4="light"] :is(.tv-card,.tv-cd,.tv-list,.tv-sum>div,.tv-stat,.tv-wiz,.tv-bars,.tv-wtc){box-shadow:0 1px 2px rgba(0,0,0,.04);}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.tv-card,.tv-cd,.tv-list,.tv-wiz,.tv-bars,.tv-wtc,.tv-mt){background:#121212!important;border-color:rgba(255,255,255,.09)!important;box-shadow:none!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.tv-sum>div,.tv-stat,.tv-sess){background:#121212!important;border-color:transparent!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] :is(.tv-mini:not(.on),.tv-tg,.tv-ix,.tv-sc,.tv-inv code,.tv-msg,.tv-dots b:not(.on),.tv-chip:not(.up):not(.bad)){background:#1C1C1E!important;border-color:transparent!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .tv-sc:is(.s1,.s2){background:rgba(214,58,78,.28)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .tv-sc:is(.s4,.s5){background:rgba(0,229,138,.2)!important;}
html[data-v4="dark"][data-v4][data-v4][data-v4][data-v4][data-v4] .tv-mini.on{background:#FF7A1A!important;}
html[data-v4="dark"] .app-tab:is([data-tab="clients"],[data-tab="checkins"],[data-tab="tpl"]),html[data-v4="dark"] .tvw{--tv-bad:#FF6B7D;}
html[data-v4="dark"] .tv-dots b.on{color:#06140D;}