/* NutriGuru glass effect layer
   A restrained glassmorphism treatment for mobile cards, navigation and imagery. */

:root {
  --glass-bg: rgba(18, 29, 41, .68);
  --glass-bg-strong: rgba(20, 33, 46, .84);
  --glass-border: rgba(190, 231, 235, .18);
  --glass-highlight: rgba(255, 255, 255, .07);
  --glass-shadow: 0 20px 48px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body {
  background:
    radial-gradient(35rem 24rem at -8% 8%, rgba(85, 224, 172, .17), transparent 68%),
    radial-gradient(30rem 22rem at 108% 22%, rgba(117, 185, 255, .17), transparent 67%),
    radial-gradient(28rem 20rem at 55% 108%, rgba(184, 165, 255, .10), transparent 70%),
    #080d14;
}

body::after {
  content: '';
  position: fixed;
  width: 260px;
  height: 260px;
  right: -120px;
  top: 35%;
  border-radius: 50%;
  background: rgba(85, 224, 172, .10);
  filter: blur(48px);
  pointer-events: none;
  z-index: -1;
}

.app-header {
  background: rgba(8, 13, 20, .66) !important;
  border-bottom-color: var(--glass-border) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

.bottom-nav {
  background: rgba(19, 31, 44, .70) !important;
  border-color: var(--glass-border) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .43), inset 0 1px 0 var(--glass-highlight) !important;
}

.ng-card, .meal-card, .workout-card, .community-post, .ng-card-light {
  background: linear-gradient(145deg, rgba(28, 44, 58, .72), rgba(12, 22, 32, .66)) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.ng-card::before, .meal-card::before, .workout-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.055), transparent 34%);
  pointer-events: none;
}

.ng-card, .meal-card, .workout-card { position: relative; overflow: hidden; }
.meal-card, .workout-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.meal-card:hover, .workout-card:hover { border-color: rgba(119, 239, 200, .38) !important; box-shadow: 0 22px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.09) !important; }

.screen-photo-card, .hero-banner {
  background: linear-gradient(135deg, rgba(27, 62, 66, .78), rgba(26, 34, 59, .72)) !important;
  border-color: rgba(150, 240, 214, .23) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.09) !important;
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.screen-photo-card::before, .hero-banner::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  left: -42px;
  top: -58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  filter: blur(2px);
  pointer-events: none;
}

.ng-input, .chat-input {
  background: rgba(16, 28, 40, .66) !important;
  border-color: rgba(183, 225, 228, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ng-input:focus, .chat-input:focus {
  background: rgba(20, 39, 49, .82) !important;
  border-color: rgba(85, 224, 172, .70) !important;
}

.ng-btn-secondary, .back-btn, .pill-tab {
  background: rgba(36, 53, 69, .62) !important;
  border-color: rgba(181, 222, 228, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ng-btn-primary {
  box-shadow: 0 10px 26px rgba(85,224,172,.22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.grid.grid-cols-3 > div,
.macro-badge {
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)) !important;
  border-color: rgba(204, 233, 235, .20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pill-tab.active { box-shadow: 0 8px 20px rgba(85,224,172,.20), inset 0 1px 0 rgba(255,255,255,.24); }
.ng-tag, .ng-tag-gray { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Local themed image tiles are inserted by glass-ui.js. */
.glass-meal-photo, .glass-workout-photo {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(218, 247, 235, .24);
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 22px rgba(0,0,0,.22);
}

.glass-meal-photo::after, .glass-workout-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%, rgba(0,0,0,.16));
  pointer-events: none;
}

.glass-meal-photo img, .glass-workout-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.glass-meal-card > .flex:first-child, .glass-workout-card { align-items: flex-start !important; }
.glass-meal-card > .flex:first-child > .flex-1 { padding-top: 2px; }
.glass-workout-card { padding: 12px !important; }
.glass-workout-photo { width: 76px; height: 76px; border-radius: 22px; }
.glass-workout-card > .flex-1 { padding-top: 3px; }

.recipe-cover {
  border-bottom: 1px solid rgba(208, 239, 236, .16);
  filter: saturate(1.08);
}
.recipe-cover::after { background: linear-gradient(180deg, rgba(8,14,22,.02), rgba(4,10,16,.78)); }

.topic-icon-hydration {
  background-image: linear-gradient(135deg, #153D59, #235F73) !important;
  background-size: cover;
  background-position: center;
}
.topic-icon-sleep {
  background-image: linear-gradient(135deg, #272653, #4A3262) !important;
  background-size: cover;
  background-position: center;
}
.topic-icon-hydration svg, .topic-icon-sleep svg { opacity: .72; }

.settings-screen .ng-card,
.modal-sheet {
  background: linear-gradient(145deg, rgba(28, 44, 58, .82), rgba(12, 22, 32, .78)) !important;
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
}

@media (max-width: 600px) {
  .ng-card, .meal-card, .workout-card { box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important; }
  .glass-meal-photo { width: 64px; height: 64px; border-radius: 18px; }
  .glass-workout-photo { width: 68px; height: 68px; border-radius: 19px; }
}

@media (prefers-reduced-transparency: reduce) {
  .ng-card, .meal-card, .workout-card, .community-post, .ng-card-light, .bottom-nav, .app-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Bright sport UI palette inspired by the supplied workout reference. */
:root {
  --background: #070809;
  --foreground: #fbfbfb;
  --card: #151617;
  --card-foreground: #fbfbfb;
  --popover: #171819;
  --popover-foreground: #fbfbfb;
  --primary: #c8ff00;
  --primary-foreground: #101500;
  --primary-strong: #9bc900;
  --secondary: #202123;
  --secondary-foreground: #f3f3f3;
  --muted: #242527;
  --muted-foreground: #b7b9ba;
  --accent: #ff3264;
  --accent-foreground: #25030d;
  --destructive: #ff416d;
  --border: rgba(255,255,255,.11);
  --input: rgba(255,255,255,.16);
  --ring: rgba(200,255,0,.8);
  --blue: #12baf5;
  --purple: #a45cff;
  --orange: #ff793d;
  --shadow: 0 20px 44px rgba(0,0,0,.4);
}

body {
  background:
    radial-gradient(26rem 20rem at -12% 6%, rgba(200,255,0,.08), transparent 68%),
    radial-gradient(26rem 22rem at 112% 36%, rgba(164,92,255,.09), transparent 68%),
    #070809;
}

body::after { background: rgba(200,255,0,.08); }
.app-header { background: rgba(7,8,9,.88) !important; border-bottom-color: rgba(255,255,255,.1) !important; }
.bottom-nav { background: rgba(25,26,28,.88) !important; border-color: rgba(255,255,255,.14) !important; }
.nav-item.active { color: #c8ff00 !important; background: rgba(200,255,0,.14) !important; }
.nav-item.active::after { background: #c8ff00 !important; box-shadow: 0 0 12px rgba(200,255,0,.7); }
.ng-btn-primary { background: #c8ff00 !important; color: #101500 !important; box-shadow: 0 10px 26px rgba(200,255,0,.22), inset 0 1px 0 rgba(255,255,255,.3) !important; }
.ng-btn-primary:hover { background: #d6ff45 !important; }
.ng-tag { color: #c8ff00 !important; background: rgba(200,255,0,.11) !important; border-color: rgba(200,255,0,.32) !important; }
.pill-tab.active { background: #c8ff00 !important; border-color: #c8ff00 !important; color: #101500 !important; }
.ng-card, .meal-card, .workout-card, .community-post, .ng-card-light { background: linear-gradient(145deg, rgba(28,29,31,.9), rgba(14,15,16,.9)) !important; border-color: rgba(255,255,255,.11) !important; }
.screen-photo-card, .hero-banner { background: linear-gradient(135deg, #293900, #16191a 54%, #361b48) !important; border-color: rgba(200,255,0,.22) !important; }
.ng-input, .chat-input { background: rgba(24,25,27,.92) !important; border-color: rgba(255,255,255,.16) !important; }
.ng-input:focus, .chat-input:focus { border-color: #c8ff00 !important; box-shadow: 0 0 0 3px rgba(200,255,0,.14) !important; }
.text-primary { color: #c8ff00 !important; }
.text-blue-400 { color: #12baf5 !important; }
.text-purple-400 { color: #a45cff !important; }
.text-orange-400, .text-accent { color: #ff793d !important; }
.text-red-400 { color: #ff3264 !important; }
.health-score-ring { filter: drop-shadow(0 0 14px rgba(200,255,0,.32)); }

/* Color-coded workout deck: each card reads as a distinct action. */
.workout-card {
  border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 15px 28px rgba(0,0,0,.25) !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}
.workout-card:nth-child(1) { background: linear-gradient(135deg, #301a50, #1b102d) !important; }
.workout-card:nth-child(2) { background: linear-gradient(135deg, #073e40, #092629) !important; }
.workout-card:nth-child(3) { background: linear-gradient(135deg, #063b52, #071f30) !important; }
.workout-card:nth-child(4) { background: linear-gradient(135deg, #4b0d24, #260812) !important; }
.workout-card:nth-child(5) { background: linear-gradient(135deg, #4a3107, #281c08) !important; }
.workout-card:hover { transform: translateY(-2px); filter: saturate(1.15); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 19px 34px rgba(0,0,0,.33) !important; }
.workout-card .ng-tag-gray { color: #e4e4e4; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.workout-card:nth-child(1) .fa-chevron-right { color: #b681ff !important; }
.workout-card:nth-child(2) .fa-chevron-right { color: #2be3df !important; }
.workout-card:nth-child(3) .fa-chevron-right { color: #13c7ff !important; }
.workout-card:nth-child(4) .fa-chevron-right { color: #ff3a6e !important; }
.workout-card:nth-child(5) .fa-chevron-right { color: #ffb52e !important; }
.workout-card:active { transform: scale(.985) !important; }

.bottom-nav .nav-item:nth-child(1) i { color: #c8ff00; }
.bottom-nav .nav-item:nth-child(2) i { color: #ff668c; }
.bottom-nav .nav-item:nth-child(3) i { color: #12baf5; }
.bottom-nav .nav-item:nth-child(4) i { color: #a45cff; }
.bottom-nav .nav-item:nth-child(5) i { color: #28e0df; }
.bottom-nav .nav-item.active i, .bottom-nav .nav-item.active span { color: #101500 !important; }
.bottom-nav .nav-item.active { background: #c8ff00 !important; box-shadow: 0 0 22px rgba(200,255,0,.16); }
.bottom-nav .nav-item.active::after { display: none; }

/* Connected photo language: the same nutrition / movement / recovery
   families repeat across cards, banners, recipes and community surfaces. */
.photo-linked-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.photo-system-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: .34;
  mix-blend-mode: screen;
}

.photo-system-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7,8,9,.98), rgba(7,8,9,.72) 48%, rgba(7,8,9,.18)), linear-gradient(0deg, rgba(7,8,9,.72), transparent 58%);
}

.photo-system-backdrop img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(1.35) contrast(1.08);
}

.photo-system-backdrop--movement { opacity: .30; }
.photo-linked-card > *:not(.photo-system-backdrop) { position: relative; z-index: 1; }

.glass-meal-photo,
.glass-workout-photo,
.recipe-cover,
.community-photo-strip {
  border: 1px solid rgba(200,255,0,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 13px 28px rgba(0,0,0,.28);
}

.glass-meal-photo img,
.glass-workout-photo img,
.community-photo-strip img {
  filter: saturate(1.28) contrast(1.04);
  transition: transform .35s ease, filter .35s ease;
}

.glass-meal-card:hover .glass-meal-photo img,
.glass-workout-card:hover .glass-workout-photo img,
.community-post:hover .community-photo-strip img {
  transform: scale(1.06);
  filter: saturate(1.5) contrast(1.08);
}

.glass-workout-photo { border-color: rgba(18,186,245,.38); }
.recipe-cover { min-height: 132px; background-color: #17251d; }
.recipe-cover::before,
.community-photo-strip::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(135deg, rgba(200,255,0,.16), transparent 45%, rgba(164,92,255,.20));
  pointer-events: none;
}

.community-photo-strip {
  position: relative;
  height: 108px;
  margin: -16px -16px 14px;
  overflow: hidden;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: rgba(40,224,223,.28);
}

.community-photo-strip img { width: 100%; height: 100%; display: block; object-fit: cover; }
.community-post { overflow: hidden; }
.community-post.photo-linked-card { padding-top: 16px !important; }

[data-photo-family="nutrition"] { --photo-accent: #c8ff00; }
[data-photo-family="movement"] { --photo-accent: #12baf5; }
[data-photo-family="recovery"] { --photo-accent: #a45cff; }
[data-photo-family="community"] { --photo-accent: #28e0df; }

@media (max-width: 520px) {
  .photo-system-backdrop { opacity: .26; }
  .community-photo-strip { height: 92px; margin-right: -14px; margin-left: -14px; }
  .recipe-cover { min-height: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-meal-photo img, .glass-workout-photo img, .community-photo-strip img { transition: none; }
}

/* Unified compact hero cards: one width, one photo language, less empty height. */
.screen-photo-card,
.hero-banner {
  width: min(100%, 700px);
  min-height: 252px;
  margin-inline: auto;
  padding: 18px !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr) !important;
  gap: 18px !important;
  background:
    linear-gradient(90deg, rgba(7,9,10,.88), rgba(8,11,12,.58) 48%, rgba(10,7,15,.42)),
    url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1200&q=84') center / cover no-repeat !important;
  border-radius: 24px !important;
  border-color: rgba(200,255,0,.28) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12) !important;
}

.screen-photo-card > .screen-photo-illustration,
.hero-banner > .hero-illustration {
  width: min(100%, 250px) !important;
  max-height: 212px !important;
  min-height: 0 !important;
  justify-self: end;
  border-radius: 20px;
}

.screen-photo-card > .photo-system-backdrop,
.hero-banner > .photo-system-backdrop {
  opacity: .48 !important;
  mix-blend-mode: normal !important;
}

.screen-photo-card > .photo-system-backdrop::after,
.hero-banner > .photo-system-backdrop::after {
  background:
    linear-gradient(90deg, rgba(5,7,8,.82), rgba(5,7,8,.43) 52%, rgba(5,7,8,.16)),
    linear-gradient(180deg, rgba(5,7,8,.08), rgba(5,7,8,.62));
}

.screen-photo-card > .photo-system-backdrop img,
.hero-banner > .photo-system-backdrop img {
  object-position: center 45%;
  filter: saturate(1.35) contrast(1.08) brightness(.82);
}

@media (max-width: 680px) {
  .screen-photo-card,
  .hero-banner {
    width: 100%;
    min-height: 0;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 154px !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  .screen-photo-card > .screen-photo-illustration,
  .hero-banner > .hero-illustration {
    width: 100% !important;
    max-width: none !important;
    max-height: 154px !important;
    justify-self: stretch;
  }
}

/* Final sizing pass: keep every illustrated banner compact and balanced. */
@media (min-width: 681px) {
  .screen-photo-card,
  .hero-banner {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 16px !important;
    gap: 14px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .screen-photo-card > .screen-photo-illustration,
  .hero-banner > .hero-illustration {
    width: min(100%, 230px) !important;
    height: 174px !important;
    max-height: 174px !important;
    object-fit: contain !important;
  }
}

@media (max-width: 680px) {
  .screen-photo-card,
  .hero-banner {
    min-height: 286px !important;
    padding: 15px !important;
    gap: 11px !important;
    grid-template-rows: minmax(0, 1fr) 112px !important;
  }

  .screen-photo-card > .screen-photo-illustration,
  .hero-banner > .hero-illustration {
    height: 112px !important;
    max-height: 112px !important;
    object-fit: contain !important;
  }
}