/* Organized by product feature for straightforward maintenance. */
/* Approved Cyborg branding, splash and Coach character visuals. */

/* Approved chrome wordmark alignment. */
  :root{
    --accent:#20c8ff;
    --accent2:#168cff;
    --accent3:#ff7a1a;
    --danger:#ff5a2b;
    --border:#334252;
  }
  html,body{background:linear-gradient(180deg,#080d13 0%,#0d151e 48%,#10151d 100%)}
  .splash{
    background:
      radial-gradient(circle at 18% 20%,rgba(32,200,255,.20),transparent 31%),
      radial-gradient(circle at 82% 24%,rgba(22,140,255,.20),transparent 34%),
      radial-gradient(circle at 50% 88%,rgba(255,122,26,.18),transparent 37%),
      linear-gradient(145deg,#060a0f 0%,#0c1722 50%,#0c1118 100%);
  }
  .orb.one{background:#20c8ff}.orb.two{background:#168cff}.orb.three{background:#ff7a1a}
  .tab-btn.active,.food-day-button.active{
    background:linear-gradient(135deg,#20c8ff 0%,#168cff 66%,#ff7a1a 145%)!important;
    color:#061019!important;
    box-shadow:0 10px 28px rgba(32,200,255,.20)!important;
  }
  .enter-btn{
    background:linear-gradient(105deg,#0e8dff,#28d5ff 52%,#ff7a1a 125%)!important;
    color:#041019!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.20),0 14px 38px rgba(32,200,255,.26)!important;
  }
  .protein{background:linear-gradient(90deg,#0fa8ff,#64e5ff)!important}
  .carbs{background:linear-gradient(90deg,#116dff,#20c8ff)!important}
  .fat{background:linear-gradient(90deg,#ff641c,#ffad45)!important}
  .calories{background:linear-gradient(90deg,#a9d7ec,#ffffff 48%,#20c8ff)!important}
  .legend-train{color:#20c8ff!important}.legend-food{color:#ff7a1a!important}.legend-check{color:#7edfff!important}

  .header-brandline .brand-lockup-title,
  .auth-brand .brand-lockup-title,
  .splash-brand-title{
    font-family:"Arial Black","Segoe UI Black",Impact,system-ui,sans-serif!important;
    font-style:normal!important;
    font-weight:1000!important;
    letter-spacing:.045em!important;
    -webkit-text-stroke:.7px rgba(224,246,255,.65)!important;
    color:transparent!important;
    background-image:
      linear-gradient(180deg,#ffffff 0%,#eafaff 10%,#ffffff 23%,#b9d0dd 38%,#f8fdff 51%,#d3e5ef 67%,#ffffff 82%,#9eb4c1 100%),
      linear-gradient(105deg,transparent 30%,transparent 40%,rgba(255,255,255,.98) 48%,rgba(72,210,255,.95) 51%,rgba(255,255,255,.95) 54%,transparent 62%,transparent 100%)!important;
    background-size:100% 100%,300% 100%!important;
    background-position:center,180% 0!important;
    background-blend-mode:screen!important;
    -webkit-background-clip:text!important;background-clip:text!important;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 2px 0 rgba(82,105,121,.72)) drop-shadow(0 0 13px rgba(32,200,255,.38))!important;
    transform:none!important;
    animation:cyborgChromeSweep 4.2s ease-in-out infinite!important;
  }
  @keyframes cyborgChromeSweep{
    0%,50%{background-position:center,180% 0}
    82%,100%{background-position:center,-180% 0}
  }
  .splash-brand-title{font-size:clamp(27px,7.5vw,55px)!important;white-space:nowrap!important;max-width:100%!important;padding:0 .12em!important}
  .header-brandline .brand-lockup-title{font-size:clamp(19px,6vw,31px)!important;white-space:nowrap!important;padding:0 .1em!important}
  .brand-lockup-tag,.brand-slogan{color:#ff8a24!important;text-shadow:0 0 12px rgba(255,122,26,.32)}

  .splash-card{background:linear-gradient(180deg,rgba(13,22,31,.78),rgba(7,12,18,.90));border-color:rgba(32,200,255,.22)}
  .splash-hero-frame{width:min(76vw,390px);height:min(48vh,440px);display:grid;place-items:end center;margin-bottom:0;animation:none!important}
  .splash-hero-img{width:auto!important;height:100%!important;max-width:100%;max-height:100%!important;object-fit:contain;transform-origin:50% 90%;animation:coachSplashIdle 3.6s ease-in-out infinite,coachEnergyGlow 2.5s ease-in-out infinite!important}
  .splash-hero-frame::after{background:linear-gradient(90deg,transparent,#20c8ff,#ff7a1a,transparent)!important;box-shadow:0 0 22px rgba(32,200,255,.55)!important}
  @keyframes coachSplashIdle{
    0%,100%{transform:translateY(0) scale(1)}
    48%{transform:translateY(-7px) scale(1.012)}
    54%{transform:translateY(-7px) scale(1.016)}
  }
  @keyframes coachEnergyGlow{
    0%,100%{filter:drop-shadow(0 18px 30px rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(32,200,255,.16))}
    50%{filter:drop-shadow(0 21px 34px rgba(0,0,0,.48)) drop-shadow(0 0 25px rgba(32,200,255,.42)) drop-shadow(0 0 12px rgba(255,122,26,.22))}
  }

  .burt-card{border-color:rgba(32,200,255,.24)!important;background:var(--cf-card-surface)!important}
  .burt-mascot-wrap{min-height:300px;overflow:hidden;position:relative;border-radius:18px;background:radial-gradient(circle at 50% 43%,rgba(32,200,255,.16),transparent 43%),linear-gradient(180deg,rgba(12,22,31,.82),rgba(8,12,18,.92));border:1px solid rgba(32,200,255,.16)}
  .cyborg-coach-stage{position:relative;width:100%;height:300px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
  .cyborg-coach-aura{position:absolute;width:185px;height:185px;border-radius:50%;top:43px;background:radial-gradient(circle,rgba(32,200,255,.23),rgba(22,140,255,.10) 45%,transparent 70%);filter:blur(7px);animation:coachAura 2.8s ease-in-out infinite}
  .burt-mascot{position:relative;z-index:2;width:auto!important;height:278px!important;max-width:94%;object-fit:contain;object-position:center bottom;transform-origin:50% 92%;animation:coachIdleMotion 3.2s ease-in-out infinite,coachEnergyGlow 2.5s ease-in-out infinite;transition:opacity .2s ease,transform .25s ease}
  .burt-mascot.pose-changing{opacity:0;transform:translateY(5px) scale(.98)}
  .cyborg-coach-status{position:absolute;z-index:3;bottom:8px;left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(4,10,15,.82);border:1px solid rgba(32,200,255,.25);font-size:8px;font-weight:900;letter-spacing:1.2px;color:#dff7ff;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.35)}
  .cyborg-coach-status span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#20c8ff;box-shadow:0 0 9px #20c8ff;margin-right:5px;animation:coachStatusPulse 1.4s ease-in-out infinite}
  @keyframes coachIdleMotion{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}50%{transform:translateY(-4px) rotate(.3deg) scale(1.008)}}
  @keyframes coachAura{0%,100%{transform:scale(.94);opacity:.62}50%{transform:scale(1.08);opacity:1}}
  @keyframes coachStatusPulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
  .burt-badge{background:rgba(32,200,255,.09)!important;color:#65ddff!important;border-color:rgba(32,200,255,.24)!important}
  .fact-takeaway{background:linear-gradient(135deg,rgba(32,200,255,.08),rgba(255,122,26,.055))!important;border-color:rgba(32,200,255,.17)!important;color:#e4f7ff!important}
  .social-nuts-balance,.food-network-badge{color:#ffb064!important;border-color:rgba(255,122,26,.28)!important;background:rgba(255,122,26,.08)!important}

  @media(max-width:560px){
    .splash-card{padding-top:18px!important}
    .splash-hero-frame{height:min(43vh,380px);width:min(76vw,350px)}
    .splash p{font-size:12px;margin:7px auto 12px}
    .brand-slogan{margin-top:9px}
    .burt-mascot-wrap,.cyborg-coach-stage{min-height:260px;height:260px}
    .burt-mascot{height:245px!important}
  }


  /* Final single-character splash artwork */
  .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  .splash{padding:0!important;background:#04080d!important;overflow:hidden!important;display:grid!important;place-items:center!important}
  .final-splash-poster{
    position:relative;
    height:100dvh;
    max-height:100dvh;
    width:min(100vw,56.25dvh);
    max-width:100vw;
    aspect-ratio:9/16;
    overflow:hidden;
    isolation:isolate;
    background:#050a10;
    box-shadow:0 0 70px rgba(32,200,255,.12),0 0 110px rgba(255,122,26,.08);
  }
  .final-splash-image{
    position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;
    transform-origin:50% 56%;
    animation:finalPosterBreathe 5.2s ease-in-out infinite;
    will-change:transform,filter;
  }
  .final-splash-poster::before{
    content:"";position:absolute;z-index:2;inset:-28% -80%;pointer-events:none;
    background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.03) 44%,rgba(96,222,255,.22) 49%,rgba(255,255,255,.36) 50%,rgba(255,143,54,.12) 53%,transparent 59%);
    mix-blend-mode:screen;
    transform:translateX(-44%);
    animation:finalChromeSweep 5.8s ease-in-out infinite;
  }
  .final-splash-poster::after{
    content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
    background:
      radial-gradient(circle at 50% 35%,rgba(32,200,255,.15),transparent 11%),
      radial-gradient(circle at 50% 58%,transparent 42%,rgba(1,5,9,.14) 85%,rgba(1,5,9,.34) 100%);
    animation:finalAmbientPulse 3.1s ease-in-out infinite;
  }
  .final-splash-core{
    position:absolute;z-index:3;pointer-events:none;left:50%;top:34.4%;width:11%;aspect-ratio:1;
    transform:translate(-50%,-50%);border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.75) 0 3%,rgba(77,224,255,.5) 8%,rgba(32,200,255,.22) 24%,transparent 68%);
    mix-blend-mode:screen;filter:blur(.2px);
    animation:finalCorePulse 2.15s ease-in-out infinite;
  }
  .final-splash-energy{
    position:absolute;z-index:3;pointer-events:none;left:50%;bottom:6.7%;width:57%;height:7.5%;
    transform:translateX(-50%);border-radius:24px;
    box-shadow:0 0 15px rgba(32,200,255,.24),0 0 33px rgba(32,200,255,.15);
    animation:finalButtonEnergy 1.9s ease-in-out infinite;
  }
  .final-splash-enter{
    position:absolute;z-index:5;left:22%;right:22%;bottom:4.5%;height:10.2%;
    padding:0;margin:0;border:0;border-radius:22px;background:transparent;color:transparent;
    cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .final-splash-enter:focus-visible{outline:3px solid #7eeaff;outline-offset:-5px;box-shadow:0 0 0 5px rgba(32,200,255,.28)}
  .final-splash-enter:active{background:rgba(32,200,255,.08);box-shadow:inset 0 0 24px rgba(32,200,255,.25)}
  @keyframes finalPosterBreathe{
    0%,100%{transform:scale(1);filter:saturate(1) brightness(1)}
    48%{transform:scale(1.007);filter:saturate(1.035) brightness(1.018)}
    54%{transform:scale(1.009);filter:saturate(1.045) brightness(1.022)}
  }
  @keyframes finalChromeSweep{
    0%,18%{transform:translateX(-52%);opacity:0}
    27%{opacity:.7}
    48%{transform:translateX(52%);opacity:.45}
    56%,100%{transform:translateX(58%);opacity:0}
  }
  @keyframes finalAmbientPulse{0%,100%{opacity:.56}50%{opacity:1}}
  @keyframes finalCorePulse{
    0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:.45;filter:blur(.4px)}
    50%{transform:translate(-50%,-50%) scale(1.22);opacity:1;filter:blur(0)}
  }
  @keyframes finalButtonEnergy{
    0%,100%{opacity:.36;transform:translateX(-50%) scale(.98)}
    50%{opacity:.9;transform:translateX(-50%) scale(1.025)}
  }
  @media (min-aspect-ratio:9/16){
    .final-splash-poster{height:100dvh;width:56.25dvh}
  }
  @media (max-aspect-ratio:9/16){
    .final-splash-poster{width:100vw;height:177.777vw;max-height:100dvh}
  }
  @media (prefers-reduced-motion:reduce){
    .final-splash-image,.final-splash-poster::before,.final-splash-poster::after,.final-splash-core,.final-splash-energy{animation:none!important}
  }


  /* Splash-matched in-app wordmark. */
  .header-brandline{padding:0 36px!important;width:100%!important;overflow:visible!important}
  .header-brandline .brand-lockup-copy{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important}
  .header-wordmark-shell{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:min(100%,760px);max-width:calc(100vw - 74px);height:36px;
    overflow:hidden;isolation:isolate;margin:0 auto;
  }
  .header-wordmark-image{
    display:block;width:100%;height:100%;object-fit:contain;object-position:center;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.72)) drop-shadow(0 0 8px rgba(32,200,255,.20));
    mix-blend-mode:screen;transform:scaleX(1.035);transform-origin:center;
  }
  .header-wordmark-shell::after{
    content:"";position:absolute;inset:-15% -35%;pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,0) 42%,rgba(255,255,255,.95) 49%,rgba(100,220,255,.82) 52%,rgba(255,255,255,0) 59%,transparent 66%);
    transform:translateX(-72%);mix-blend-mode:screen;animation:headerWordmarkGlint 4.8s ease-in-out infinite;
  }
  @keyframes headerWordmarkGlint{0%,55%{transform:translateX(-72%)}82%,100%{transform:translateX(72%)}}
  .header-brandline .brand-lockup-tag{margin-top:-1px!important;font-size:7px!important;letter-spacing:2.7px!important}
  @media(max-width:420px){
    .header-brandline{padding:0 31px!important}
    .header-wordmark-shell{max-width:calc(100vw - 64px);height:34px}
    .header-wordmark-image{transform:scaleX(1.05)}
  }

  /* Compact text wordmark and scanner-safe layout. */
  .header-brandline{padding-left:32px!important;padding-right:32px!important}
  .header-brandline .brand-lockup-copy{width:100%!important;align-items:center!important;overflow:visible!important}
  .in-app-wordmark{
    display:block!important;width:100%!important;max-width:760px!important;margin:0 auto!important;
    padding:0 .28em!important;text-align:center!important;white-space:nowrap!important;overflow:visible!important;
    font-family:"Arial Black","Segoe UI Black",Impact,system-ui,sans-serif!important;
    font-style:normal!important;font-weight:1000!important;line-height:1!important;
    font-size:clamp(18px,5.65vw,31px)!important;letter-spacing:.145em!important;
    -webkit-text-stroke:.7px rgba(229,246,255,.78)!important;
    background:linear-gradient(180deg,#ffffff 0%,#dff5ff 16%,#8e9ca9 35%,#f9ffff 50%,#8b98a6 68%,#f4fbff 82%,#7d8995 100%)!important;
    -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 2px 0 rgba(18,27,36,.95)) drop-shadow(0 0 8px rgba(32,200,255,.22))!important;
    animation:cyborgTextGlisten 4.8s ease-in-out infinite!important;
  }
  @media(max-width:420px){
    .header-brandline{padding-left:28px!important;padding-right:28px!important}
    .in-app-wordmark{font-size:clamp(17px,5.55vw,23px)!important;letter-spacing:.13em!important;padding:0 .24em!important}
  }
  .cyborg-character{min-height:1px}
  .cyborg-character.image-failed{opacity:.55;filter:grayscale(.35) drop-shadow(0 10px 25px rgba(32,200,255,.2))}