/* NutriGuru unified surface system
   One compact card language for dashboard, meals, workouts and utility screens. */
:root {
  --ui-surface: linear-gradient(145deg, rgba(27, 29, 32, .96), rgba(13, 14, 16, .96));
  --ui-surface-soft: linear-gradient(145deg, rgba(31, 34, 38, .92), rgba(17, 18, 20, .95));
  --ui-border: rgba(255, 255, 255, .13);
  --ui-border-strong: rgba(200, 255, 0, .28);
  --ui-radius: 22px;
  --ui-shadow: 0 18px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .055);
}

/* Shared screen rhythm */
#screenContent > .fade-in-up,
#screenContent > .personal-screen {
  width: min(100%, 760px);
  margin-inline: auto;
}
#screenContent .fade-in-up > .ng-card,
#screenContent .fade-in-up > .meal-card,
#screenContent .fade-in-up > .workout-card,
#screenContent .fade-in-up > .community-post,
#screenContent .fade-in-up > .screen-photo-card,
#screenContent .fade-in-up > .hero-banner,
#screenContent .fade-in-up > .supp-card,
#screenContent .fade-in-up > .recipe-card {
  border-radius: var(--ui-radius) !important;
  border: 1px solid var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Keep ordinary cards visually related even when a screen uses old utility classes. */
.ng-card,
.ng-card-light,
.meal-card,
.workout-card,
.community-post,
.supp-card,
.recipe-card {
  border-radius: var(--ui-radius);
  border-color: var(--ui-border) !important;
  box-shadow: var(--ui-shadow) !important;
}
.ng-card-light { background: rgba(25, 27, 30, .88) !important; }
.meal-card, .community-post, .recipe-card { background: var(--ui-surface) !important; }
.workout-card { background: var(--ui-surface-soft) !important; }
.ng-card:hover, .ng-card-light:hover, .meal-card:hover, .workout-card:hover, .community-post:hover, .recipe-card:hover {
  border-color: rgba(200, 255, 0, .24) !important;
}

/* Workout supplements: use the available width instead of a short horizontal rail. */
#screenContent .fade-in-up > div:has(> .flex.items-center.justify-between > .section-title) > .flex.gap-2.overflow-x-auto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding-bottom: 0;
}

#screenContent .fade-in-up > div:has(> .flex.items-center.justify-between > .section-title) > .flex.gap-2.overflow-x-auto > .ng-card {
  width: 100%;
  min-width: 0;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  padding: 15px 10px;
  background: linear-gradient(145deg, rgba(31, 34, 38, .96), rgba(16, 18, 20, .98)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#screenContent .fade-in-up > div:has(> .flex.items-center.justify-between > .section-title) > .flex.gap-2.overflow-x-auto > .ng-card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 255, 0, .38) !important;
  background: linear-gradient(145deg, rgba(45, 53, 30, .96), rgba(18, 22, 20, .98)) !important;
}

#screenContent .fade-in-up > div:has(> .flex.items-center.justify-between > .section-title) > .flex.gap-2.overflow-x-auto > .ng-card > div:first-child {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  margin-bottom: 2px;
  border: 1px solid rgba(200, 255, 0, .16);
  border-radius: 15px;
  background: rgba(200, 255, 0, .08);
}

#screenContent .fade-in-up > div:has(> .flex.items-center.justify-between > .section-title) > .flex.gap-2.overflow-x-auto > .ng-card p {
  max-width: 100%;
  line-height: 1.25;
}

/* The dedicated supplements page follows the same roomy card language. */
#screenContent .supp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  padding: 15px;
  border: 1px solid var(--ui-border) !important;
  border-radius: 20px;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow) !important;
}

#screenContent .supp-card:hover {
  border-color: rgba(200, 255, 0, .3) !important;
}

@media (max-width: 600px) {
  #screenContent .fade-in-up > div:has(> .flex.items-center.justify-between > .section-title) > .flex.gap-2.overflow-x-auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Consistent inner controls and section titles */
#screenContent .section-title,
#screenContent .personal-section-label {
  color: #fff;
  letter-spacing: -.02em;
}
#screenContent .pill-tab { min-height: 42px; }
#screenContent .ng-btn-primary,
#screenContent .ng-btn-secondary,
#screenContent .back-btn { border-radius: 14px; }
#screenContent .ng-input { border-radius: 14px; }

/* Compact shared hero treatment */
#screenContent .screen-photo-card,
#screenContent .hero-banner {
  border-radius: 24px !important;
  border-color: var(--ui-border-strong) !important;
}

/* Utility lists should read as separate, tappable boxes. */
#screenContent .space-y-3 > .ng-card,
#screenContent .space-y-3 > .ng-card-light,
#screenContent .space-y-3 > .supp-card,
#screenContent .space-y-3 > .community-post {
  border-radius: 18px;
}

/* More / settings / tracker surfaces get the same inset highlight. */
#screenContent .settings-screen .ng-card,
#screenContent .modal-sheet,
#screenContent .water-screen .ng-card,
#screenContent .sleep-screen .ng-card {
  border-radius: 20px !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Mobile: preserve breathing room without oversized empty panels. */
@media (max-width: 680px) {
  :root { --ui-radius: 19px; }
  #screenContent > .fade-in-up,
  #screenContent > .personal-screen { padding-bottom: 12px; }
  #screenContent .fade-in-up > .ng-card,
  #screenContent .fade-in-up > .meal-card,
  #screenContent .fade-in-up > .workout-card,
  #screenContent .fade-in-up > .community-post { box-shadow: 0 14px 30px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.05) !important; }
}

@media (prefers-reduced-motion: reduce) {
  #screenContent .ng-card:hover,
  #screenContent .meal-card:hover,
  #screenContent .workout-card:hover { transform: none; }
}