/* NutriGuru liquid-glass layer
   iOS-inspired translucent materials for auth and onboarding surfaces.
   The visual treatment stays lightweight and keeps the orange brand accent. */

:root {
  --ng-glass-orange: #ff8a00;
  --ng-glass-orange-light: #ffad32;
  --ng-glass-edge: rgba(255, 255, 255, .16);
  --ng-glass-highlight: rgba(255, 255, 255, .12);
  --ng-glass-shadow: 0 18px 42px rgba(0, 0, 0, .28);
}

/* Prevent the one-frame flash caused by switching a gradient to a flat hover color. */
#authScreen button,
#onboardingScreen button,
#signUpScreen button {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#authScreen,
#onboardingScreen,
#signUpScreen {
  isolation: isolate;
}

#authScreen::before,
#onboardingScreen::before,
#signUpScreen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(28rem 22rem at 8% -4%, rgba(255, 138, 0, .10), transparent 68%),
    radial-gradient(24rem 20rem at 100% 32%, rgba(255, 173, 50, .07), transparent 70%),
    linear-gradient(180deg, rgba(7, 9, 10, .96), rgba(11, 17, 23, .98));
}

/* Frosted fields and cards */
#authScreen .ng-input,
#signUpScreen .ng-input,
#onboardingScreen .ng-onboarding-input,
#onboardingScreen .ng-choice {
  background: linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)) !important;
  border-color: var(--ng-glass-edge) !important;
  box-shadow: inset 0 1px 0 var(--ng-glass-highlight), 0 10px 26px rgba(0, 0, 0, .16) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
}

#onboardingScreen .ng-choice {
  position: relative;
  overflow: hidden;
}

#onboardingScreen .ng-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .10), transparent 33%, transparent 72%, rgba(255, 138, 0, .035));
  opacity: .72;
}

#onboardingScreen .ng-choice > *,
#onboardingScreen .ng-choice-copy {
  position: relative;
  z-index: 1;
}

#authScreen .ng-input:focus,
#signUpScreen .ng-input:focus,
#onboardingScreen .ng-onboarding-input:focus {
  background: linear-gradient(135deg, rgba(255, 138, 0, .12), rgba(255, 255, 255, .035)) !important;
  border-color: rgba(255, 138, 0, .82) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

#onboardingScreen .ng-choice.is-selected {
  background: linear-gradient(135deg, rgba(255, 138, 0, .19), rgba(255, 255, 255, .045)) !important;
  border-color: rgba(255, 138, 0, .92) !important;
  box-shadow: 0 0 0 2px rgba(255, 138, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .14), var(--ng-glass-shadow) !important;
}

/* Stable hover states: only edge, light and elevation change. */
#authScreen .ng-btn-primary,
#authScreen .ng-btn-secondary,
#signUpScreen .ng-btn-primary,
#onboardingScreen .ng-onboarding-next,
#onboardingScreen .ng-onboarding-back,
#authScreen .google-auth-btn,
#authScreen .auth-register-btn {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
  will-change: transform;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

#authScreen .ng-btn-primary,
#signUpScreen .ng-btn-primary,
#onboardingScreen .ng-onboarding-next {
  background: linear-gradient(135deg, rgba(255, 173, 50, .98), rgba(255, 138, 0, .92)) !important;
  color: #1c1004 !important;
  border: 1px solid rgba(255, 216, 157, .38) !important;
  box-shadow: 0 12px 30px rgba(255, 138, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .42) !important;
}

#authScreen .ng-btn-secondary,
#onboardingScreen .ng-onboarding-back {
  background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .045)) !important;
  border: 1px solid var(--ng-glass-edge) !important;
  box-shadow: inset 0 1px 0 var(--ng-glass-highlight), 0 12px 28px rgba(0, 0, 0, .20) !important;
}

#authScreen .google-auth-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045)) !important;
  border-color: var(--ng-glass-edge) !important;
  box-shadow: inset 0 1px 0 var(--ng-glass-highlight), 0 12px 28px rgba(0, 0, 0, .18) !important;
}

#authScreen .auth-register-btn {
  background: linear-gradient(135deg, rgba(255, 138, 0, .20), rgba(255, 173, 50, .07)) !important;
  border-color: rgba(255, 138, 0, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 12px 28px rgba(0, 0, 0, .18) !important;
}

#onboardingScreen .ng-onboarding-actions {
  background: linear-gradient(180deg, rgba(7, 9, 10, 0), rgba(7, 9, 10, .78) 28%, rgba(7, 9, 10, .92)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

#authScreen .ng-btn-primary:hover,
#authScreen .ng-btn-primary:focus-visible,
#signUpScreen .ng-btn-primary:hover,
#signUpScreen .ng-btn-primary:focus-visible,
#onboardingScreen .ng-onboarding-next:hover,
#onboardingScreen .ng-onboarding-next:focus-visible {
  /* Keep the same gradient on hover; this removes the visible flash. */
  background: linear-gradient(135deg, rgba(255, 173, 50, .98), rgba(255, 138, 0, .92)) !important;
  border-color: rgba(255, 226, 183, .62) !important;
  box-shadow: 0 15px 34px rgba(255, 138, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .48) !important;
  filter: brightness(1.045);
  transform: translateY(-1px) translateZ(0);
}

#authScreen .ng-btn-secondary:hover,
#authScreen .ng-btn-secondary:focus-visible,
#onboardingScreen .ng-onboarding-back:hover,
#onboardingScreen .ng-onboarding-back:focus-visible,
#authScreen .google-auth-btn:hover,
#authScreen .google-auth-btn:focus-visible,
#authScreen .auth-register-btn:hover,
#authScreen .auth-register-btn:focus-visible {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06)) !important;
  border-color: rgba(255, 138, 0, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 15px 34px rgba(0, 0, 0, .26) !important;
  filter: brightness(1.04);
  transform: translateY(-1px) translateZ(0);
}

#authScreen button:active,
#signUpScreen button:active,
#onboardingScreen button:active {
  filter: brightness(.98);
  transform: scale(.985) translateZ(0) !important;
}

@media (hover: none), (pointer: coarse) {
  #authScreen button:hover,
  #signUpScreen button:hover,
  #onboardingScreen button:hover {
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  #authScreen .ng-input,
  #signUpScreen .ng-input,
  #onboardingScreen .ng-onboarding-input,
  #onboardingScreen .ng-choice,
  #authScreen button,
  #signUpScreen button,
  #onboardingScreen button {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Keep shared app buttons stable too: hover never swaps a gradient for a flat fill. */
.ng-btn-primary,
.ng-btn-secondary,
.ng-btn-accent {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ng-btn-primary:hover {
  background: #c8ff00 !important;
  box-shadow: 0 13px 30px rgba(200, 255, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  filter: brightness(1.04);
  transform: translateY(-1px) translateZ(0);
}

.ng-btn-secondary:hover {
  background: rgba(36, 53, 69, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 13px 30px rgba(0, 0, 0, .22) !important;
  filter: brightness(1.04);
  transform: translateY(-1px) translateZ(0);
}

.ng-btn-accent:hover {
  filter: brightness(1.04);
  transform: translateY(-1px) translateZ(0);
}

@media (hover: none), (pointer: coarse) {
  .ng-btn-primary:hover,
  .ng-btn-secondary:hover,
  .ng-btn-accent:hover {
    transform: translateZ(0);
    filter: none;
  }
}

/* iOS 26-style material across the complete app surface. The layer is
   intentionally translucent, with one consistent edge/highlight language. */
:root {
  --ng-glass-surface: rgba(18, 28, 38, .66);
  --ng-glass-surface-strong: rgba(15, 24, 34, .82);
  --ng-glass-blur: blur(24px) saturate(150%);
  --ng-glass-radius: 20px;
}

body {
  background:
    radial-gradient(34rem 26rem at -8% -8%, rgba(255, 138, 0, .10), transparent 70%),
    radial-gradient(30rem 24rem at 108% 22%, rgba(85, 224, 172, .08), transparent 70%),
    linear-gradient(180deg, #07090a 0%, #0b1117 100%) !important;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.035), transparent 28%, transparent 72%, rgba(255,255,255,.018));
}

/* Shared glass material primitives. */
.app-header,
.bottom-nav,
.ng-card,
.ng-card-light,
.meal-card,
.workout-card,
.community-post,
.macro-badge,
.pill-tab,
.screen-photo-card,
.hero-banner,
.recipe-card,
.admin-card,
.admin-kpi,
.admin-toolbar,
.admin-search,
.admin-user-row,
.settings-screen .ng-card,
.chat-bubble-ai,
.chat-input-bar {
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 42px rgba(0,0,0,.20) !important;
  -webkit-backdrop-filter: var(--ng-glass-blur);
  backdrop-filter: var(--ng-glass-blur);
}

.ng-card,
.ng-card-light,
.meal-card,
.workout-card,
.community-post,
.screen-photo-card,
.hero-banner,
.recipe-card,
.admin-card,
.admin-kpi,
.settings-screen .ng-card {
  border-radius: var(--ng-glass-radius) !important;
  overflow: hidden;
}

.app-header {
  background: linear-gradient(180deg, rgba(12,18,24,.78), rgba(12,18,24,.52)) !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}

.header-action-button,
.header-profile-button,
.back-btn,
.fab,
.water-drop,
.toggle-slider {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045)) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.22) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.header-action-button:hover,
.header-action-button:focus-visible,
.back-btn:hover,
.back-btn:focus-visible,
.fab:hover,
.fab:focus-visible,
.water-drop:hover,
.water-drop:focus-visible {
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.065)) !important;
  border-color: rgba(255,138,0,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.17), 0 16px 34px rgba(0,0,0,.28) !important;
  transform: translateY(-1px) translateZ(0);
}

.bottom-nav {
  background: linear-gradient(135deg, rgba(20,31,42,.76), rgba(10,18,26,.68)) !important;
  border-radius: 26px !important;
  border-color: rgba(255,255,255,.17) !important;
}

.nav-item:hover,
.nav-item:focus-visible {
  background: rgba(255,255,255,.08) !important;
  color: #f4f8fa !important;
}

.nav-item.active {
  background: linear-gradient(135deg, rgba(255,173,50,.22), rgba(255,138,0,.08)) !important;
  color: #ffcf91 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.pill-tab.active { background: linear-gradient(135deg, rgba(255,173,50,.98), rgba(255,138,0,.90)) !important; border-color: rgba(255,216,157,.52) !important; color: #1c1004 !important; box-shadow: 0 13px 30px rgba(255,138,0,.24), inset 0 1px 0 rgba(255,255,255,.42) !important; }

.ng-input,
.chat-input,
.settings-screen select,
.settings-screen textarea,
.admin-filters select,
.admin-assign-form select {
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 25px rgba(0,0,0,.14) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.ng-input:focus,
.chat-input:focus,
.settings-screen select:focus,
.settings-screen textarea:focus,
.admin-filters select:focus,
.admin-assign-form select:focus {
  background: linear-gradient(135deg, rgba(255,138,0,.12), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,138,0,.76) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,.14), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.ng-btn-primary,
.ng-btn-secondary,
.ng-btn-accent,
.pill-tab,
.nav-item,
.admin-small-btn,
.admin-text-btn,
.toggle-slider {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.ng-btn-primary,
.ng-btn-accent,
.fab {
  background: linear-gradient(135deg, rgba(255,173,50,.98), rgba(255,138,0,.90)) !important;
  color: #1c1004 !important;
  border-color: rgba(255,216,157,.42) !important;
  box-shadow: 0 13px 30px rgba(255,138,0,.23), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.ng-btn-secondary,
.admin-small-btn,
.pill-tab {
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.18) !important;
}

.ng-btn-primary:hover,
.ng-btn-primary:focus-visible,
.ng-btn-accent:hover,
.ng-btn-accent:focus-visible,
.fab:hover,
.fab:focus-visible {
  background: linear-gradient(135deg, rgba(255,183,71,.99), rgba(255,138,0,.94)) !important;
  border-color: rgba(255,226,183,.68) !important;
  box-shadow: 0 16px 36px rgba(255,138,0,.31), inset 0 1px 0 rgba(255,255,255,.48) !important;
  filter: brightness(1.03);
  transform: translateY(-1px) translateZ(0);
}

.ng-btn-secondary:hover,
.ng-btn-secondary:focus-visible,
.admin-small-btn:hover,
.admin-small-btn:focus-visible,
.pill-tab:hover,
.pill-tab:focus-visible {
  background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.06)) !important;
  border-color: rgba(255,138,0,.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 34px rgba(0,0,0,.25) !important;
  filter: brightness(1.03);
  transform: translateY(-1px) translateZ(0);
}

.modal-overlay {
  background: rgba(2,8,14,.62) !important;
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  backdrop-filter: blur(16px) saturate(125%);
}

.modal-sheet {
  background: linear-gradient(135deg, rgba(25,38,51,.88), rgba(10,18,27,.82)) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 -18px 50px rgba(0,0,0,.44) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
}

@media (hover: none), (pointer: coarse) {
  .header-action-button:hover,
  .back-btn:hover,
  .fab:hover,
  .water-drop:hover,
  .ng-btn-primary:hover,
  .ng-btn-secondary:hover,
  .ng-btn-accent:hover,
  .admin-small-btn:hover,
  .pill-tab:hover {
    transform: translateZ(0);
    filter: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header,
  .bottom-nav,
  .ng-card,
  .ng-card-light,
  .meal-card,
  .workout-card,
  .community-post,
  .admin-card,
  .admin-kpi,
  .ng-input,
  .chat-input,
  .modal-sheet,
  .header-action-button,
  .back-btn,
  .fab {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Registration CTA: a distinct glass pill instead of a plain text-like block. */
#authScreen .auth-register-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 50px;
  border-radius: 17px !important;
  background: linear-gradient(135deg, rgba(255,138,0,.24), rgba(255,173,50,.08)) !important;
  border-color: rgba(255,138,0,.62) !important;
  color: #ffc16c !important;
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(255,138,0,.12) !important;
}

#authScreen .auth-register-btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.18) 48%, transparent 78%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}

#authScreen .auth-register-btn:hover::before,
#authScreen .auth-register-btn:focus-visible::before {
  transform: translateX(120%);
}

#authScreen .auth-register-btn:hover,
#authScreen .auth-register-btn:focus-visible {
  background: linear-gradient(135deg, rgba(255,154,25,.34), rgba(255,173,50,.12)) !important;
  border-color: rgba(255,190,100,.82) !important;
  color: #fff1d6 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 34px rgba(255,138,0,.20) !important;
}

#authScreen .auth-inline-register {
  min-height: 38px;
  margin-left: 5px;
  padding: 6px 12px;
  border: 1px solid rgba(255,138,0,.48);
  border-radius: 999px;
  color: #ffb347 !important;
  background: linear-gradient(135deg, rgba(255,138,0,.18), rgba(255,173,50,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(255,138,0,.10);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}

#authScreen .auth-inline-register:hover,
#authScreen .auth-inline-register:focus-visible {
  color: #fff0d2 !important;
  border-color: rgba(255,190,100,.82);
  background: linear-gradient(135deg, rgba(255,154,25,.30), rgba(255,173,50,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 12px 25px rgba(255,138,0,.18);
  filter: brightness(1.04);
  transform: translateY(-1px) translateZ(0);
  outline: none;
}

.brand-mark {
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.28), 0 0 28px rgba(255,138,0,.12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

@media (hover: none), (pointer: coarse) {
  #authScreen .auth-inline-register:hover {
    transform: translateZ(0);
    filter: none;
  }
}

/* Dashboard material: the same iOS 26 glass language continues after login.
   Keep lime for progress/status data and use the orange logo accent for
   tappable primary actions. */
.home-screen-mode #screenContent {
  background: transparent !important;
}

.home-tracker {
  background:
    radial-gradient(28rem 22rem at 8% 0%, rgba(255,138,0,.07), transparent 70%),
    linear-gradient(180deg, rgba(7,9,10,.54), rgba(11,17,23,.72)) !important;
}

.best-day-widget,
.food-scan-widget,
.tracker-activity-card,
.tracker-card,
.tracker-meal-row,
.tracker-habit {
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 18px 42px rgba(0,0,0,.24) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}

.best-day-widget,
.food-scan-widget,
.tracker-activity-card {
  isolation: isolate;
}

.best-day-widget {
  border-color: rgba(255,138,0,.52) !important;
}

.best-day-overlay {
  background:
    linear-gradient(105deg, rgba(8,10,11,.82), rgba(8,10,11,.43) 52%, rgba(8,10,11,.16)),
    linear-gradient(135deg, rgba(255,138,0,.08), transparent 48%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(125%);
  backdrop-filter: blur(2px) saturate(125%);
}

.food-scan-widget {
  border-color: rgba(255,138,0,.48) !important;
}

.food-scan-widget::after {
  background:
    linear-gradient(100deg, rgba(8,10,11,.60), rgba(8,10,11,.22) 56%, rgba(8,10,11,.34)),
    linear-gradient(135deg, rgba(255,138,0,.08), transparent 46%) !important;
}

.tracker-activity-card {
  background: linear-gradient(135deg, rgba(27,42,58,.70), rgba(12,19,27,.64)) !important;
}

.tracker-activity-card::before {
  background: radial-gradient(circle, rgba(255,138,0,.16), rgba(102,164,255,.08) 48%, transparent 72%) !important;
  filter: blur(16px);
}

.tracker-card,
.tracker-meal-row,
.tracker-habit,
.tracker-activity-stat,
.best-day-score {
  background: linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
}

.tracker-meal-row,
.tracker-habit {
  border-color: rgba(255,255,255,.13) !important;
}

.tracker-meal-row:hover,
.tracker-habit:hover,
.tracker-activity-link:hover,
.tracker-macro-settings:hover {
  border-color: rgba(255,138,0,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 14px 30px rgba(0,0,0,.28) !important;
}

.tracker-activity-link,
.tracker-macro-settings {
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) !important;
  border-color: rgba(255,255,255,.17) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

.tracker-activity-link:hover,
.tracker-activity-link:focus-visible {
  color: #ffe0b0 !important;
  background: linear-gradient(135deg, rgba(255,138,0,.22), rgba(255,173,50,.07)) !important;
}

.home-screen-mode .bottom-nav {
  background: linear-gradient(135deg, rgba(20,31,42,.76), rgba(10,18,26,.68)) !important;
  border-color: rgba(255,255,255,.17) !important;
}

.home-screen-mode .nav-item:hover,
.home-screen-mode .nav-item:focus-visible {
  background: rgba(255,138,0,.12) !important;
  color: #ffe0b0 !important;
}

.home-screen-mode .nav-item.active {
  color: #1c1004 !important;
  background: linear-gradient(135deg, rgba(255,173,50,.98), rgba(255,138,0,.90)) !important;
  border-color: rgba(255,216,157,.52) !important;
  box-shadow: 0 13px 30px rgba(255,138,0,.28), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

@media (hover: none), (pointer: coarse) {
  .best-day-button:hover, .food-scan-button:hover, .tracker-log-button:hover { transform: translateZ(0); filter: none; }
  .food-scan-sticky:hover, .tracker-fab:hover { transform: translateX(-50%) !important; filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .best-day-widget,
  .food-scan-widget,
  .tracker-activity-card,
  .tracker-card,
  .tracker-meal-row,
  .tracker-habit,
  .tracker-activity-link,
  .tracker-macro-settings {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* The app header belongs to the page flow. Only the bottom action nav stays fixed. */
#mainApp {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

#screenContent {
  min-height: 0;
  overflow-y: visible;
  overflow-x: hidden;
}

.app-header {
  position: relative;
  top: auto;
  z-index: 1;
}