#onboardingScreen{position:fixed;inset:0;z-index:45;overflow:hidden;background:#10121d;color:#f7f7fa}#onboardingScreen>div{min-height:100dvh}.ng-onboarding{position:relative;display:flex;flex-direction:column;width:100%;max-width:680px;height:100dvh;margin:0 auto;padding:calc(20px + env(safe-area-inset-top)) 24px calc(116px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.ng-onboarding::-webkit-scrollbar{display:none}.ng-onboarding-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:34px;color:#f6f7fb}.ng-onboarding-wordmark{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:850;letter-spacing:-.02em}.ng-onboarding-dot{width:11px;height:11px;border-radius:50%;background:#62a9ff;box-shadow:0 0 0 5px rgba(98,169,255,.14)}.ng-onboarding-section{color:#aeb1be;font-size:15px;font-weight:700}.ng-onboarding-progress{display:flex;height:7px;margin:38px 0 10px;overflow:hidden;border-radius:99px;background:#343641}.ng-onboarding-progress span{display:block;height:100%;border-radius:inherit;background:#62a9ff;transition:width .35s ease}.ng-onboarding-counter{color:#8d91a0;font-size:12px;font-weight:750;letter-spacing:.03em}.ng-onboarding-content{flex:1;padding-top:42px}.ng-onboarding-title{max-width:620px;margin:0;color:#f7f7fa;font-size:clamp(34px,8.3vw,56px);font-weight:850;line-height:1.08;letter-spacing:-.055em}.ng-onboarding-subtitle{max-width:620px;margin:22px 0 34px;color:#aeb1be;font-size:clamp(18px,4.6vw,25px);line-height:1.34;letter-spacing:-.025em}.ng-onboarding-form{display:grid;gap:18px}.ng-name-card{max-width:620px}.ng-name-card label,.ng-body-fields label{display:block;margin:0 0 9px;color:#aeb1be;font-size:18px;font-weight:750}.ng-onboarding-input{width:100%;min-height:70px;padding:15px 20px;border:2px solid #424652;border-radius:23px;background:#10121d;color:#f8f8fb;font-size:24px;font-weight:700;outline:none;transition:border-color .2s,box-shadow .2s}.ng-onboarding-input::placeholder{color:#6f7381}.ng-onboarding-input:focus{border-color:#62a9ff;box-shadow:0 0 0 4px rgba(98,169,255,.15)}.ng-name-card p{margin:13px 2px 0;color:#858995;font-size:15px;line-height:1.4}.ng-choice-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}.ng-choice{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:102px;padding:20px 22px;border:1px solid rgba(255,255,255,.04);border-radius:22px;background:#242733;color:#f5f5f8;text-align:left;cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s}.ng-choice:hover,.ng-choice:focus-visible{border-color:rgba(98,169,255,.75);outline:none;transform:translateY(-1px)}.ng-choice.is-selected{border:2px solid #62a9ff;background:#103f7e;box-shadow:0 0 0 1px rgba(98,169,255,.15)}.ng-choice-copy{display:flex;flex-direction:column;min-width:0}.ng-choice-copy strong{font-size:21px;line-height:1.15;letter-spacing:-.025em}.ng-choice-copy small{margin-top:8px;color:#a9acb8;font-size:14px;line-height:1.32}.ng-choice.is-selected .ng-choice-copy small{color:#c5dcff}.ng-choice-check{display:grid;place-items:center;flex:0 0 31px;width:31px;height:31px;border:3px solid #717582;border-radius:50%;color:transparent;font-size:14px}.ng-choice.is-selected .ng-choice-check{border-color:#62a9ff;background:#62a9ff;color:#10233e}.ng-choice.is-selected .ng-choice-check i{display:block}.ng-onboarding-note{display:flex;gap:9px;align-items:flex-start;max-width:620px;margin:0;color:#858995;font-size:14px;line-height:1.4}.ng-onboarding-note i{padding-top:3px;color:#62a9ff}.ng-body-fields{display:grid;grid-template-columns:1fr 1fr;gap:17px}.ng-body-fields label{font-size:16px}.ng-body-fields .ng-onboarding-input{margin-top:8px}.ng-body-fields select{appearance:auto;font-size:18px}.ng-onboarding-actions{position:fixed;z-index:2;right:0;bottom:0;left:0;display:flex;gap:14px;align-items:center;width:100%;max-width:680px;margin:auto;padding:14px 24px calc(18px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(16,18,29,0),#10121d 30%)}.ng-onboarding-back{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border:0;border-radius:50%;background:#20344f;color:#62a9ff;font-size:25px;cursor:pointer}.ng-onboarding-back.is-hidden{visibility:hidden}.ng-onboarding-next{display:flex;align-items:center;justify-content:center;gap:12px;flex:1;min-height:64px;padding:15px 22px;border:0;border-radius:40px;background:#62a9ff;color:#08162e;font-size:23px;font-weight:850;box-shadow:0 8px 25px rgba(98,169,255,.2);cursor:pointer;transition:transform .18s,background .18s}.ng-onboarding-next:hover{background:#76b4ff}.ng-onboarding-next:active,.ng-onboarding-back:active{transform:scale(.97)}.ng-onboarding-skip{align-self:center;margin-top:13px;padding:7px 14px;border:0;background:none;color:#777b88;font-size:13px;cursor:pointer}.ng-onboarding-skip:hover{color:#b8bbc6}@media(max-width:560px){.ng-onboarding{padding-right:18px;padding-left:18px}.ng-onboarding-progress{margin-top:31px}.ng-onboarding-content{padding-top:34px}.ng-onboarding-title{font-size:clamp(32px,9.2vw,45px)}.ng-onboarding-subtitle{margin-top:16px;margin-bottom:26px;font-size:19px}.ng-choice-list{grid-template-columns:1fr}.ng-choice{min-height:78px;padding:17px 18px}.ng-choice-copy strong{font-size:20px}.ng-choice-copy small{margin-top:5px;font-size:13px}.ng-choice-check{flex-basis:28px;width:28px;height:28px}.ng-body-fields{gap:12px}.ng-body-fields label{font-size:15px}.ng-onboarding-input{min-height:62px;padding:13px 16px;border-radius:19px;font-size:21px}.ng-onboarding-actions{padding-right:18px;padding-left:18px}.ng-onboarding-back{flex-basis:58px;width:58px;height:58px}.ng-onboarding-next{min-height:58px;font-size:20px}.ng-onboarding-section{font-size:14px}}@media(max-width:360px){.ng-onboarding{padding-right:14px;padding-left:14px}.ng-onboarding-header{gap:8px}.ng-onboarding-wordmark{font-size:14px}.ng-onboarding-section{font-size:12px}.ng-body-fields{grid-template-columns:1fr}.ng-onboarding-actions{padding-right:14px;padding-left:14px}}
/* Registration screen shares the same calm, spacious mobile rhythm. */
#signUpScreen{background:#10121d!important;color:#f7f7fa}#signUpScreen>div{min-height:100dvh;justify-content:flex-start!important;padding:calc(28px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom))!important}.ng-registration{width:100%;max-width:620px;margin:0 auto}.ng-registration-top{display:flex;align-items:center;justify-content:space-between;color:#f7f7fa}.ng-registration-brand{font-size:16px;font-weight:850}.ng-registration-step{color:#aeb1be;font-size:14px}.ng-registration-progress{display:flex;gap:7px;margin:38px 0 48px}.ng-registration-progress span{height:7px;flex:1;border-radius:99px;background:#343641}.ng-registration-progress span:first-child{background:#62a9ff}.ng-registration h2{max-width:560px;margin:0!important;text-align:left!important;font-size:clamp(35px,9vw,54px)!important;line-height:1.06!important;letter-spacing:-.055em}.ng-registration>p{max-width:560px;margin:19px 0 32px!important;text-align:left!important;color:#aeb1be!important;font-size:20px!important}.ng-registration-form{display:grid;gap:15px;width:100%;max-width:620px}.ng-registration-form .input-group .ng-input{min-height:62px;border-radius:19px;background:#10121d;border:2px solid #424652}.ng-registration-form .input-group .ng-input:focus{border-color:#62a9ff;box-shadow:0 0 0 4px rgba(98,169,255,.15)}.ng-registration-form .ng-btn-primary{min-height:62px;border-radius:36px;background:#62a9ff;color:#08162e;font-size:20px}.ng-registration-form .text-xs{color:#858995!important;font-size:13px!important}.ng-registration-switch{margin-top:25px!important;text-align:center!important;font-size:15px!important}@media(max-width:560px){#signUpScreen>div{padding-right:18px!important;padding-left:18px!important}.ng-registration-progress{margin:29px 0 37px}.ng-registration>p{font-size:18px!important}.ng-registration h2{font-size:clamp(34px,10vw,44px)!important}}
@media(prefers-reduced-motion:reduce){.ng-choice,.ng-onboarding-next,.ng-onboarding-back{transition:none}}

/* Keep the latest mobile onboarding layout and preserve the dark NutriGuru surfaces. */
#onboardingScreen{background:linear-gradient(180deg,#07090a 0%,#0b1117 100%)!important;color:#f8fafc}
#onboardingScreen .ng-onboarding-header{color:#f8fafc}
#onboardingScreen .ng-onboarding-dot{background:#b7ff00;box-shadow:0 0 0 5px rgba(183,255,0,.14)}
#onboardingScreen .ng-onboarding-section{color:#9ba8b5}
#onboardingScreen .ng-onboarding-progress{background:#1b252d}
#onboardingScreen .ng-onboarding-progress span{background:linear-gradient(90deg,#b7ff00,#55e0ac);box-shadow:0 0 18px rgba(183,255,0,.35)}
#onboardingScreen .ng-onboarding-counter{color:#9ba8b5}
#onboardingScreen .ng-onboarding-title{color:#fff}
#onboardingScreen .ng-onboarding-subtitle{color:#b8c5d0}
#onboardingScreen .ng-name-card label,#onboardingScreen .ng-body-fields label{color:#b8c5d0}
#onboardingScreen .ng-onboarding-input{background:#0b1117;color:#f8fafc;border-color:rgba(183,255,0,.22)}
#onboardingScreen .ng-onboarding-input:focus{border-color:#b7ff00;box-shadow:0 0 0 4px rgba(183,255,0,.14)}
#onboardingScreen .ng-onboarding-form p{color:#9ba8b5}
#onboardingScreen .ng-choice{background:#121a20;border-color:rgba(183,255,0,.14)}
#onboardingScreen .ng-choice:hover,#onboardingScreen .ng-choice:focus-visible{border-color:rgba(183,255,0,.65);box-shadow:0 0 0 2px rgba(183,255,0,.08)}
#onboardingScreen .ng-choice.is-selected{border-color:#b7ff00;box-shadow:0 0 0 2px rgba(183,255,0,.18),0 12px 28px rgba(0,0,0,.25)}
#onboardingScreen .ng-choice-copy strong{color:#f8fafc}
#onboardingScreen .ng-choice-copy small{color:#9ba8b5}
#onboardingScreen .ng-choice-check{border-color:#64727b;color:#07100a}
#onboardingScreen .ng-choice.is-selected .ng-choice-check{border-color:#b7ff00;background:#b7ff00;color:#07100a}
#onboardingScreen .ng-onboarding-next{background:linear-gradient(135deg,#b7ff00,#8fe600);color:#07100a;box-shadow:0 12px 30px rgba(183,255,0,.18)}
#onboardingScreen .ng-onboarding-next:hover,#onboardingScreen .ng-onboarding-next:focus-visible{background:#c6ff42;box-shadow:0 14px 34px rgba(183,255,0,.28)}
#onboardingScreen .ng-onboarding-back{background:#13221d;color:#b7ff00;border-color:rgba(183,255,0,.16)}
#onboardingScreen .ng-onboarding-skip{color:#9ba8b5}

/* Registration uses the same restored palette without changing its new layout. */
#signUpScreen{background:linear-gradient(180deg,#07090a 0%,#0b1117 100%)!important;color:#f8fafc}
#signUpScreen .ng-registration-top{color:#f8fafc}
#signUpScreen .ng-registration-step{color:#9ba8b5}
#signUpScreen .ng-registration-progress span{background:#1b252d}
#signUpScreen .ng-registration-progress span:first-child{background:linear-gradient(90deg,#b7ff00,#55e0ac)}
#signUpScreen .ng-registration h2{color:#fff}
#signUpScreen .ng-registration>p{color:#b8c5d0!important}
#signUpScreen .ng-registration-form .input-group .ng-input{background:#0b1117;border-color:rgba(183,255,0,.22);color:#f8fafc}
#signUpScreen .ng-registration-form .input-group .ng-input:focus{border-color:#b7ff00;box-shadow:0 0 0 4px rgba(183,255,0,.14)}
#signUpScreen .ng-registration-form .ng-btn-primary{background:linear-gradient(135deg,#b7ff00,#8fe600);color:#07100a;box-shadow:0 12px 30px rgba(183,255,0,.18)}
#signUpScreen .ng-registration-form .ng-btn-primary:hover,#signUpScreen .ng-registration-form .ng-btn-primary:focus-visible{background:#c6ff42}
#signUpScreen .ng-registration-form .text-xs{color:#9ba8b5!important}
#signUpScreen .ng-registration-switch{color:#9ba8b5!important}
#signUpScreen .ng-registration-switch .text-primary{color:#b7ff00!important}

/* Mobile refinement: compact controls, shorter cards and a calmer sticky action bar. */
@media (max-width: 640px) {
  #onboardingScreen,
  #signUpScreen {
    -webkit-tap-highlight-color: transparent;
  }

  .ng-onboarding {
    max-width: 520px;
    padding: calc(16px + env(safe-area-inset-top)) clamp(16px, 5vw, 22px) calc(92px + env(safe-area-inset-bottom));
  }

  .ng-onboarding-header {
    min-height: 30px;
    gap: 10px;
  }

  .ng-onboarding-wordmark {
    gap: 7px;
    font-size: 14px;
  }

  .ng-onboarding-dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px rgba(183,255,0,.12);
  }

  .ng-onboarding-section {
    font-size: 12px;
  }

  .ng-onboarding-progress {
    height: 5px;
    margin: 24px 0 8px;
  }

  .ng-onboarding-counter {
    font-size: 11px;
  }

  .ng-onboarding-content {
    padding-top: 28px;
  }

  .ng-onboarding-title {
    font-size: clamp(29px, 8.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -.045em;
  }

  .ng-onboarding-subtitle {
    margin: 14px 0 22px;
    font-size: clamp(16px, 4.3vw, 19px);
    line-height: 1.35;
  }

  .ng-onboarding-form {
    gap: 12px;
  }

  .ng-name-card label,
  .ng-body-fields label {
    margin-bottom: 7px;
    font-size: 15px;
  }

  .ng-onboarding-input,
  .ng-registration-form .input-group .ng-input {
    min-height: 54px;
    padding: 12px 15px;
    border-radius: 15px;
    font-size: 18px;
  }

  .ng-name-card p,
  .ng-onboarding-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
  }

  .ng-body-fields {
    gap: 12px;
  }

  .ng-choice-list {
    gap: 10px;
  }

  .ng-choice {
    min-height: 64px;
    padding: 13px 14px;
    border-radius: 16px;
    gap: 12px;
  }

  .ng-choice-copy {
    gap: 3px;
  }

  .ng-choice-copy strong {
    font-size: 16px;
    line-height: 1.2;
  }

  .ng-choice-copy small {
    font-size: 12px;
    line-height: 1.3;
  }

  .ng-choice-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .ng-onboarding-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: auto;
    padding: 12px 0 calc(7px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7,9,10,0), #07090a 25%);
  }

  .ng-onboarding-back {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 14px;
  }

  .ng-onboarding-next,
  .ng-registration-form .ng-btn-primary {
    width: 100%;
    min-height: 52px;
    height: 52px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 17px;
    line-height: 1;
  }

  .ng-onboarding-next i {
    margin-left: 5px;
    font-size: 13px;
  }

  .ng-onboarding-skip {
    margin: 4px auto 0;
    font-size: 12px;
  }

  #signUpScreen>div {
    padding: calc(20px + env(safe-area-inset-top)) clamp(16px, 5vw, 22px) calc(24px + env(safe-area-inset-bottom)) !important;
  }

  .ng-registration-progress {
    gap: 5px;
    margin: 24px 0 32px;
  }

  .ng-registration-progress span {
    height: 5px;
  }

  .ng-registration h2 {
    font-size: clamp(30px, 8.8vw, 40px) !important;
  }

  .ng-registration>p {
    margin: 14px 0 24px !important;
    font-size: 16px !important;
    line-height: 1.35;
  }

  .ng-registration-form {
    gap: 12px;
  }
}

@media (max-width: 380px), (max-height: 700px) {
  .ng-onboarding {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  .ng-onboarding-progress {
    margin-top: 18px;
  }

  .ng-onboarding-content {
    padding-top: 22px;
  }

  .ng-onboarding-title {
    font-size: 28px;
  }

  .ng-onboarding-subtitle {
    margin-bottom: 18px;
    font-size: 15px;
  }

  .ng-choice {
    min-height: 58px;
    padding: 11px 12px;
  }

  .ng-choice-copy strong {
    font-size: 15px;
  }

  .ng-choice-copy small {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ng-onboarding-progress span,
  .ng-choice,
  .ng-onboarding-next,
  .ng-onboarding-back {
    transition: none !important;
  }
}

/* Brand orange replaces the former green action color in registration and onboarding. */
#onboardingScreen .ng-onboarding-dot { background: #ff8a00; box-shadow: 0 0 0 4px rgba(255, 138, 0, .14); }
#onboardingScreen .ng-onboarding-progress span { background: linear-gradient(90deg, #ff8a00, #ffb347); box-shadow: 0 0 18px rgba(255, 138, 0, .28); }
#onboardingScreen .ng-onboarding-input:focus { border-color: #ff8a00; box-shadow: 0 0 0 4px rgba(255, 138, 0, .14); }
#onboardingScreen .ng-choice:hover,
#onboardingScreen .ng-choice:focus-visible { border-color: rgba(255, 138, 0, .68); box-shadow: 0 0 0 2px rgba(255, 138, 0, .1); }
#onboardingScreen .ng-choice.is-selected { border-color: #ff8a00; box-shadow: 0 0 0 2px rgba(255, 138, 0, .2), 0 12px 28px rgba(0, 0, 0, .25); }
#onboardingScreen .ng-choice.is-selected .ng-choice-check { border-color: #ff8a00; background: #ff8a00; color: #1c1004; }
#onboardingScreen .ng-onboarding-next { background: linear-gradient(135deg, #ff8a00, #ffad32); color: #1c1004; box-shadow: 0 12px 30px rgba(255, 138, 0, .22); }
#onboardingScreen .ng-onboarding-next:hover,
#onboardingScreen .ng-onboarding-next:focus-visible { background: #ffb347; box-shadow: 0 14px 34px rgba(255, 138, 0, .3); }
#onboardingScreen .ng-onboarding-back { background: #2a1d12; color: #ffad32; border-color: rgba(255, 138, 0, .2); }
#onboardingScreen .ng-onboarding-skip { color: #c6a98c; }

#signUpScreen .ng-registration-progress span:first-child { background: linear-gradient(90deg, #ff8a00, #ffb347); }
#signUpScreen .ng-registration-form .input-group .ng-input:focus { border-color: #ff8a00; box-shadow: 0 0 0 4px rgba(255, 138, 0, .14); }
#signUpScreen .ng-registration-form .ng-btn-primary { background: linear-gradient(135deg, #ff8a00, #ffad32); color: #1c1004; box-shadow: 0 12px 30px rgba(255, 138, 0, .22); }
#signUpScreen .ng-registration-form .ng-btn-primary:hover,
#signUpScreen .ng-registration-form .ng-btn-primary:focus-visible { background: #ffb347; }
#signUpScreen .ng-registration-switch .text-primary { color: #ff9d1a !important; }

/* Animated plan-building state shown after the final onboarding step. */
.ng-plan-loading {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
  text-align: center;
  background: radial-gradient(circle at 50% 38%, rgba(255,138,0,.14), transparent 32%), linear-gradient(180deg,#07090a 0%,#0b1117 100%);
  animation: ng-loading-in .45s ease both;
}

.ng-plan-loading-orbit {
  position: relative;
  width: 92px;
  height: 92px;
  margin-bottom: 30px;
  border: 1px solid rgba(255,138,0,.28);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(255,138,0,.05), 0 0 44px rgba(255,138,0,.18);
  animation: ng-orbit-pulse 1.8s ease-in-out infinite;
}

.ng-plan-loading-orbit::before,
.ng-plan-loading-orbit::after {
  content: '';
  position: absolute;
  inset: 13px;
  border: 2px solid transparent;
  border-top-color: #ff8a00;
  border-right-color: #ffb347;
  border-radius: 50%;
  animation: ng-spin 1.15s linear infinite;
}

.ng-plan-loading-orbit::after {
  inset: 27px;
  border-top-color: #ffd18a;
  border-right-color: transparent;
  animation-direction: reverse;
  animation-duration: .8s;
}

.ng-plan-loading-orbit span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffad32;
  box-shadow: 0 0 12px rgba(255,173,50,.9);
}

.ng-plan-loading-orbit span:nth-child(1) { top: 7px; left: 42px; }
.ng-plan-loading-orbit span:nth-child(2) { right: 10px; bottom: 20px; animation: ng-dot-float 1.3s ease-in-out infinite; }
.ng-plan-loading-orbit span:nth-child(3) { left: 12px; bottom: 18px; animation: ng-dot-float 1.3s .35s ease-in-out infinite; }

.ng-plan-loading-kicker {
  margin: 0 0 12px;
  color: #ffad32;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ng-plan-loading-title {
  max-width: 560px;
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 7vw, 48px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.ng-plan-loading-subtitle {
  max-width: 470px;
  margin: 18px 0 28px;
  color: #b8c5d0;
  font-size: 17px;
  line-height: 1.45;
}

.ng-plan-loading-progress {
  width: min(390px, 100%);
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: #1b252d;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}

.ng-plan-loading-progress span {
  display: block;
  width: 3%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a00, #ffb347, #ffe0a8);
  box-shadow: 0 0 18px rgba(255,138,0,.5);
  transition: width .18s ease-out;
}

.ng-plan-loading-status {
  min-height: 24px;
  margin: 16px 0 0;
  color: #f4d0a0;
  font-size: 14px;
  font-weight: 700;
  transition: opacity .2s ease;
}

.ng-plan-loading-dots {
  display: flex;
  gap: 6px;
  margin-top: 18px;
}

.ng-plan-loading-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff8a00;
  animation: ng-loading-dot 1.05s ease-in-out infinite;
}

.ng-plan-loading-dots i:nth-child(2) { animation-delay: .16s; }
.ng-plan-loading-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes ng-loading-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ng-spin { to { transform: rotate(360deg); } }
@keyframes ng-orbit-pulse { 50% { transform: scale(1.035); box-shadow: 0 0 0 16px rgba(255,138,0,.03), 0 0 58px rgba(255,138,0,.24); } }
@keyframes ng-dot-float { 50% { transform: translateY(-5px); opacity: .65; } }
@keyframes ng-loading-dot { 0%, 100% { transform: translateY(0); opacity: .42; } 50% { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 640px) {
  .ng-plan-loading { padding-right: 20px; padding-left: 20px; }
  .ng-plan-loading-orbit { width: 78px; height: 78px; margin-bottom: 24px; }
  .ng-plan-loading-orbit::before { inset: 11px; }
  .ng-plan-loading-orbit::after { inset: 23px; }
  .ng-plan-loading-orbit span:nth-child(1) { top: 5px; left: 35px; }
  .ng-plan-loading-subtitle { margin: 14px 0 24px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-plan-loading,
  .ng-plan-loading-orbit,
  .ng-plan-loading-orbit::before,
  .ng-plan-loading-orbit::after,
  .ng-plan-loading-orbit span,
  .ng-plan-loading-dots i { animation: none !important; }
}

/* Step 9 is a completion screen, not another form step. */
.ng-onboarding-final-shell {
  min-height: 100dvh;
  overflow: hidden;
}

.ng-onboarding-final-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 620px;
  margin: 0 auto;
  padding: 36px 0 48px;
  text-align: center;
}

.ng-final-mark {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  margin-bottom: 28px;
  border: 1px solid rgba(255, 173, 50, .44);
  border-radius: 28px;
  color: #ffad32;
  background: linear-gradient(145deg, rgba(255, 138, 0, .22), rgba(255, 255, 255, .05));
  box-shadow: 0 0 0 12px rgba(255, 138, 0, .06), 0 18px 44px rgba(255, 138, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-size: 30px;
}

.ng-onboarding-final-title {
  max-width: 580px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 8.5vw, 58px);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -.055em;
}

.ng-onboarding-final-subtitle {
  max-width: 520px;
  margin: 20px 0 0;
  color: #b8c5d0;
  font-size: clamp(17px, 4.5vw, 23px);
  line-height: 1.42;
  letter-spacing: -.02em;
}

.ng-onboarding-final-actions {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 14px 0 calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7, 9, 10, 0), rgba(7, 9, 10, .92) 28%);
}

.ng-onboarding-final-actions .ng-onboarding-back {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 48px;
  border-radius: 16px;
}

.ng-onboarding-final-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 207, 145, .42);
  border-radius: 18px;
  color: #1c1004;
  background: linear-gradient(135deg, #ff8a00, #ffad32);
  box-shadow: 0 14px 32px rgba(255, 138, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .34);
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 850;
  line-height: 1.2;
  text-align: center;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.ng-onboarding-final-cta:hover,
.ng-onboarding-final-cta:focus-visible { filter: brightness(1.08); box-shadow: 0 16px 38px rgba(255, 138, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .42); outline: none; }
.ng-onboarding-final-cta:active { transform: scale(.985); }

@media (max-width: 640px) {
  .ng-onboarding-final-shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ng-onboarding-final-content { padding: 24px 4px 34px; }
  .ng-final-mark { width: 68px; height: 68px; margin-bottom: 22px; border-radius: 23px; font-size: 26px; }
  .ng-onboarding-final-subtitle { margin-top: 15px; font-size: clamp(16px, 4.5vw, 19px); }
  .ng-onboarding-final-actions { position: sticky; bottom: 0; z-index: 4; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding-top: 12px; }
  .ng-onboarding-final-actions .ng-onboarding-back { width: 44px; height: 44px; min-height: 44px; border-radius: 14px; }
  .ng-onboarding-final-cta { min-height: 54px; border-radius: 16px; padding-right: 14px; padding-left: 14px; }
}

@media (max-width: 380px), (max-height: 700px) {
  .ng-onboarding-final-content { padding-top: 14px; padding-bottom: 20px; }
  .ng-final-mark { width: 58px; height: 58px; margin-bottom: 17px; font-size: 22px; }
  .ng-onboarding-final-subtitle { font-size: 15px; }
  .ng-onboarding-final-cta { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-onboarding-final-cta { transition: none; }
}

/* Extended onboarding steps: compact groups and selectable grids for mobile. */
.ng-onboarding-group { display: grid; gap: 10px; }
.ng-onboarding-group + .ng-onboarding-group { margin-top: 14px; }
.ng-onboarding-group-title { margin: 0; color: #f4f7fa; font-size: 16px; font-weight: 850; line-height: 1.2; }
.ng-onboarding-chip-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.ng-onboarding-chip-grid .ng-choice { min-width: 0; min-height: 58px; padding: 12px; }
.ng-onboarding-chip-grid .ng-choice-copy strong { overflow-wrap: anywhere; }
.ng-onboarding-chip-grid .ng-choice-copy small { overflow-wrap: anywhere; }
.ng-choice-list.is-compact { display: grid; gap: 9px; }
.ng-choice-list.is-compact .ng-choice { min-height: 54px; }
.ng-habits-heading { display: grid; gap: 5px; margin-bottom: 2px; }
.ng-habits-heading span { color: #ffad32; font-size: 13px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.ng-habits-heading strong { color: #f4f7fa; font-size: 18px; line-height: 1.2; }
.ng-custom-field { display: grid; gap: 8px; margin-top: 10px; color: #c8d1d9; font-size: 14px; font-weight: 750; }
.ng-consent-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 4px; padding: 12px 14px; border: 1px solid rgba(255,138,0,.2); border-radius: 15px; color: #d8c2a8; background: rgba(255,138,0,.07); font-size: 13px; line-height: 1.4; }
.ng-consent-note i { flex: 0 0 auto; margin-top: 2px; color: #ffad32; }
.ng-frequency-group { margin-top: 16px; }
.ng-onboarding-chip-grid .ng-choice-check { align-self: flex-start; margin-top: 1px; }
.ng-multi-hint { display: flex; align-items: center; gap: 8px; min-height: 24px; margin: -2px 0 1px; color: #aebbc5; font-size: 12px; line-height: 1.35; }
.ng-multi-hint i { color: #ffad32; font-size: 12px; }
.ng-multi-hint b { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; border: 1px solid rgba(255,173,50,.42); border-radius: 999px; color: #ffbd59; background: rgba(255,138,0,.12); font-size: 11px; }

@media (max-width: 430px) {
  .ng-onboarding-chip-grid { gap: 8px; }
  .ng-onboarding-chip-grid .ng-choice { min-height: 56px; padding: 10px; gap: 8px; border-radius: 14px; }
  .ng-onboarding-chip-grid .ng-choice-copy strong { font-size: 14px; line-height: 1.18; }
  .ng-onboarding-chip-grid .ng-choice-copy small { font-size: 11px; line-height: 1.25; }
  .ng-onboarding-group-title { font-size: 15px; }
  .ng-habits-heading strong { font-size: 17px; }
}

@media (max-width: 350px) {
  .ng-onboarding-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ng-onboarding-chip-grid .ng-choice { min-height: 54px; padding: 9px 8px; }
  .ng-onboarding-chip-grid .ng-choice-copy strong { font-size: 13px; }
  .ng-onboarding-chip-grid .ng-choice-copy small { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ng-onboarding-group *, .ng-onboarding-chip-grid * { transition: none !important; }
}

/* The last onboarding surface is account creation, using the existing
   registration language and the NutriGuru orange CTA. */
.ng-onboarding-final-shell {
  overflow-y: auto;
}

.ng-registration-final-content {
  align-items: stretch;
  justify-content: flex-start;
  padding: 28px 0 34px;
  text-align: left;
}

.ng-onboarding-registration {
  width: 100%;
  max-width: 620px;
}

.ng-onboarding-registration .ng-registration-top {
  margin-bottom: 34px;
}

.ng-onboarding-registration .ng-onboarding-final-title {
  max-width: 560px;
  font-size: clamp(34px, 8.8vw, 54px);
  text-align: left;
}

.ng-onboarding-registration .ng-onboarding-final-subtitle {
  max-width: 560px;
  margin: 18px 0 30px;
  font-size: clamp(18px, 4.5vw, 22px);
  text-align: left;
}

.ng-onboarding-registration .ng-registration-form {
  max-width: 620px;
  gap: 14px;
}

.ng-onboarding-registration .ng-input {
  width: 100%;
  min-height: 62px;
  padding: 14px 18px;
  border: 2px solid #424652;
  border-radius: 19px;
  background: #10121d;
  color: #f8fafc;
  font-size: 16px;
  outline: none;
}

.ng-onboarding-registration .ng-input:focus {
  border-color: #ff8a00;
  box-shadow: 0 0 0 4px rgba(255, 138, 0, .14);
}

.ng-onboarding-registration .ng-registration-form .ng-onboarding-registration-submit {
  min-height: 62px;
  border-radius: 34px;
  background: linear-gradient(135deg, #ffad32, #ff8a00);
  color: #1c1004;
  box-shadow: 0 12px 30px rgba(255, 138, 0, .24);
  font-size: 18px;
  font-weight: 850;
}

.ng-onboarding-registration .ng-onboarding-registration-submit:hover,
.ng-onboarding-registration .ng-onboarding-registration-submit:focus-visible {
  background: #ffb347;
  outline: none;
}

.ng-onboarding-registration .auth-divider {
  margin: 4px 0;
}

.ng-onboarding-registration .google-auth-btn {
  min-height: 52px;
}

.ng-registration-final-content + .ng-onboarding-final-actions {
  grid-template-columns: 44px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

@media (max-width: 430px) {
  .ng-registration-final-content {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .ng-onboarding-registration .ng-registration-top {
    margin-bottom: 26px;
  }

  .ng-onboarding-registration .ng-input,
  .ng-onboarding-registration .ng-registration-form .ng-onboarding-registration-submit {
    min-height: 56px;
  }

  .ng-onboarding-registration .ng-onboarding-final-subtitle {
    margin-bottom: 22px;
  }
}

/* Keep the wizard's scroll container inside the fixed mobile auth viewport.
   Without a zero minimum height on the mount, some mobile WebViews let the
   flex child grow beyond the viewport and clip the lower part of long steps. */
#onboardingScreen > #onboardingMount {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ng-onboarding {
  min-height: 0;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

@media (max-width: 640px) {
  #onboardingScreen > #onboardingMount {
    flex: 1 1 auto;
  }

  .ng-onboarding {
    height: 100%;
    overflow-y: auto;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  .ng-onboarding-content {
    min-height: 0;
  }
}

/* Final mobile flow fix: long steps must grow the page and place the CTA
   after the choices. The previous sticky footer could sit over the middle of
   a long list in mobile WebViews, making the lower options look unreachable. */
#onboardingScreen {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#onboardingScreen > #onboardingMount {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ng-onboarding {
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.ng-onboarding-content {
  flex: 1 0 auto;
  min-height: 0;
}

.ng-onboarding-actions {
  position: static;
  flex: 0 0 auto;
  margin-top: 28px;
}

.ng-onboarding-skip {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .ng-onboarding {
    height: 100%;
    min-height: 100%;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .ng-onboarding-actions {
    margin-top: 24px;
    padding: 0 0 8px;
    background: none;
  }

  .ng-onboarding-skip {
    margin-bottom: 4px;
  }
}