/* NutriGuru Modern UI/UX layer
   Safe presentation-only modernization: no template, data, API or event changes.
   Mobile-first iOS-inspired liquid glass surfaces with restrained depth. */

:root {
  --modern-bg: #071018;
  --modern-bg-soft: #0b1721;
  --modern-surface: rgba(17, 30, 41, .78);
  --modern-surface-solid: #10202c;
  --modern-surface-soft: rgba(22, 39, 51, .62);
  --modern-edge: rgba(207, 232, 239, .14);
  --modern-edge-strong: rgba(255, 173, 50, .38);
  --modern-highlight: rgba(255, 255, 255, .095);
  --modern-shadow: 0 18px 42px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .045);
  --modern-shadow-float: 0 24px 60px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
  --modern-radius-card: 22px;
  --modern-radius-control: 15px;
  --modern-orange: #ff9e2f;
  --modern-orange-soft: rgba(255, 158, 47, .13);
  --modern-mint: #7ce8bd;
  --modern-blue: #8bc9ff;
}

/* Global rhythm and overflow guard */
html, body { background: var(--modern-bg); }
body {
  background:
    radial-gradient(34rem 28rem at -10% -8%, rgba(70, 193, 165, .12), transparent 68%),
    radial-gradient(30rem 26rem at 110% 18%, rgba(78, 145, 218, .13), transparent 70%),
    linear-gradient(180deg, #071018 0%, #09131d 58%, #071018 100%);
  line-height: 1.5;
}
body::before { opacity: .055; background-size: 28px 28px; }
#mainApp { background: transparent; }
#screenContent { max-width: 840px; padding-right: 16px; padding-left: 16px; }
#screenContent > * { min-width: 0; }
#screenContent h1, #screenContent h2, #screenContent h3, #screenContent h4 { text-wrap: balance; }
#screenContent p, #screenContent span, #screenContent label, #screenContent button { overflow-wrap: anywhere; }
#screenContent img, #screenContent svg { max-width: 100%; }

/* The header is a calm frosted layer, not a heavy solid bar. */
.app-header {
  min-height: 84px;
  background: rgba(7, 16, 24, .78) !important;
  border-bottom-color: rgba(207, 232, 239, .10) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
}
.header-profile-button, .header-action-button {
  border-color: var(--modern-edge) !important;
  box-shadow: var(--modern-shadow) !important;
}
.header-profile-button { background: linear-gradient(145deg, rgba(23, 60, 66, .92), rgba(9, 24, 32, .88)) !important; }
.header-action-button { background: rgba(20, 36, 48, .72) !important; }
.header-action-button:hover, .header-action-button:focus-visible { border-color: var(--modern-edge-strong) !important; background: rgba(31, 52, 66, .86) !important; }
.header-quick-button { background: linear-gradient(145deg, rgba(58, 105, 75, .72), rgba(12, 42, 37, .88)) !important; border-color: rgba(124, 232, 189, .32) !important; }

/* One navigation language across every screen. */
.bottom-nav {
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(760px, calc(100% - 24px));
  min-height: 68px;
  padding: 6px;
  border-color: rgba(207, 232, 239, .18) !important;
  border-radius: 24px;
  background: rgba(13, 28, 39, .78) !important;
  box-shadow: var(--modern-shadow-float) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
}
.nav-item { min-height: 54px; border-radius: 18px; color: #9fb2c1; font-size: 12px; }
.nav-item i { font-size: 17px; }
.nav-item:hover, .nav-item:focus-visible { color: #e9f5f3; background: rgba(255, 255, 255, .055); outline: none; }
.nav-item.active { color: #112116; background: linear-gradient(135deg, #ffd080, var(--modern-orange)); box-shadow: 0 10px 22px rgba(255, 158, 47, .18), inset 0 1px 0 rgba(255,255,255,.4); }
.nav-item.active::after { display: none; }

/* Selective glass: important surfaces only, with readable inner contrast. */
.ng-card, .ng-card-light, .meal-card, .workout-card, .community-post,
.recipe-card, .supp-card, .tracker-card, .tracker-activity-card,
.tracker-calorie-card, .tracker-macros, .best-day-widget, .food-scan-widget,
.meals-nutrition-card, .screen-photo-card, .hero-banner {
  border-color: var(--modern-edge) !important;
  box-shadow: var(--modern-shadow) !important;
}
.ng-card, .ng-card-light, .meal-card, .workout-card, .community-post,
.recipe-card, .supp-card, .tracker-card, .tracker-calorie-card, .tracker-macros {
  background: linear-gradient(145deg, rgba(20, 37, 49, .86), rgba(10, 23, 32, .86)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.meal-card, .workout-card, .community-post, .recipe-card, .supp-card { border-radius: var(--modern-radius-card) !important; }
.ng-card:hover, .ng-card-light:hover, .meal-card:hover, .workout-card:hover, .community-post:hover, .recipe-card:hover { border-color: rgba(124, 232, 189, .28) !important; }

/* Screen frames and title rhythm */
#screenContent > .fade-in-up, #screenContent > .personal-screen, #screenContent > .meals-screen-v2,
#screenContent > .home-tracker { padding-top: 22px; }
.section-title { font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.section-sub { color: #a8bac8; line-height: 1.55; }

/* Buttons: clear hierarchy, consistent geometry, reliable loading/disabled states. */
.ng-btn-primary, .ng-btn-secondary, .ng-btn-accent, .back-btn,
.meal-action-button, .pill-tab, .tracker-log-button, .best-day-button, .food-scan-button {
  border-radius: var(--modern-radius-control) !important;
  min-height: 44px;
  font-weight: 760;
}
.ng-btn-primary, .ng-btn-accent {
  background: linear-gradient(135deg, #ffd080, var(--modern-orange)) !important;
  color: #241506 !important;
  border-color: rgba(255, 216, 157, .42) !important;
  box-shadow: 0 10px 24px rgba(255, 158, 47, .18), inset 0 1px 0 rgba(255,255,255,.42) !important;
}
.ng-btn-primary:hover, .ng-btn-accent:hover { filter: brightness(1.05); }
.ng-btn-secondary, .back-btn {
  background: rgba(255, 255, 255, .065) !important;
  color: #e6f0f4 !important;
  border-color: var(--modern-edge) !important;
  box-shadow: inset 0 1px 0 var(--modern-highlight) !important;
}
.ng-btn-primary:focus-visible, .ng-btn-secondary:focus-visible, .ng-btn-accent:focus-visible, .back-btn:focus-visible,
.meal-action-button:focus-visible, .pill-tab:focus-visible { outline: 2px solid rgba(255, 174, 64, .82); outline-offset: 3px; }
button[aria-label], button[title] { min-width: 44px; min-height: 44px; }

/* Forms: labels, fields and validation share one quiet material. */
.ng-input, .chat-input, select.ng-input, textarea.ng-input {
  min-height: 50px;
  border-radius: var(--modern-radius-control) !important;
  border-color: var(--modern-edge) !important;
  background: rgba(10, 24, 34, .76) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.ng-input:focus, .chat-input:focus { border-color: rgba(255, 173, 50, .72) !important; box-shadow: 0 0 0 3px rgba(255, 158, 47, .13), inset 0 1px 0 rgba(255,255,255,.08) !important; }
label { color: #b8c8d3; font-weight: 650; }
.input-group .input-icon { color: #87b7c4; }

/* Nutrition and status hierarchy: the key number leads, detail recedes. */
.tracker-calorie-card, .tracker-macros { border-radius: var(--modern-radius-card) !important; }
.tracker-calorie-line strong { font-size: clamp(25px, 7vw, 34px); }
.tracker-macro-head strong, .tracker-activity-stat strong { color: #f7fbfa; }
.tracker-wide-progress, .tracker-progress { background: rgba(196, 219, 226, .12) !important; }
.tracker-wide-progress i { background: linear-gradient(90deg, #7ce8bd, #d3ff80) !important; box-shadow: 0 0 16px rgba(124,232,189,.24); }

/* Food diary: entry actions stay discoverable without competing with the meal. */
.meal-actions { gap: 8px; border-top-color: rgba(207,232,239,.10); }
.meal-action-button { background: rgba(255,255,255,.055); border-color: var(--modern-edge); color: #c7d8e2; }
.meal-action-button:hover, .meal-action-button:focus-visible { color: #ffd08a; background: var(--modern-orange-soft); border-color: rgba(255,158,47,.42); }
.food-diary-modal { border-color: var(--modern-edge) !important; background: linear-gradient(145deg, rgba(18, 36, 48, .96), rgba(8, 20, 29, .97)) !important; }
.food-diary-modal-actions { border-top-color: rgba(207,232,239,.12); }

/* AI surfaces: calm, recognisable and distinct from ordinary copy. */
.chat-bubble-ai, [class*="ai-card"], [class*="coach-card"], [class*="insight-card"] {
  border-color: rgba(124, 232, 189, .22) !important;
  background: linear-gradient(145deg, rgba(20, 52, 54, .72), rgba(13, 31, 42, .82)) !important;
  box-shadow: var(--modern-shadow) !important;
}
.chat-bubble-ai { line-height: 1.65; }
.chat-bubble-user { background: linear-gradient(135deg, #ffd080, var(--modern-orange)) !important; color: #241506 !important; }
.chat-input-bar { background: rgba(7, 16, 24, .80) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }

/* Sheets, dialogs and toasts feel like a separate layer. */
.modal-overlay { background: rgba(2, 10, 17, .68) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.modal-sheet {
  border-color: rgba(207,232,239,.18) !important;
  border-radius: 26px 26px 0 0 !important;
  background: linear-gradient(145deg, rgba(19, 39, 52, .96), rgba(7, 20, 29, .98)) !important;
  box-shadow: var(--modern-shadow-float) !important;
}
.modal-sheet::before { content: ''; display: block; width: 42px; height: 4px; margin: -10px auto 18px; border-radius: 999px; background: rgba(215, 238, 241, .28); }
#ngToast { border-color: rgba(207,232,239,.18) !important; background: rgba(17, 37, 49, .90) !important; box-shadow: var(--modern-shadow-float) !important; }

/* Empty and error panels: preserve semantics while making the next action obvious. */
.empty-state, .error-state, [data-state="empty"], [data-state="error"] {
  min-height: 150px;
  padding: 28px 20px;
  border: 1px dashed rgba(207,232,239,.20);
  border-radius: var(--modern-radius-card);
  color: #a9bbc7;
  background: rgba(15, 31, 42, .54);
  text-align: center;
}

@media (min-width: 768px) {
  #screenContent { max-width: 920px; padding-right: 24px; padding-left: 24px; }
  #screenContent > .fade-in-up, #screenContent > .personal-screen, #screenContent > .meals-screen-v2, #screenContent > .home-tracker { padding-top: 30px; }
  .modal-sheet { border-radius: 28px !important; border-bottom: 1px solid rgba(207,232,239,.18) !important; margin: auto 20px; }
  .modal-overlay { align-items: center; }
}

@media (max-width: 430px) {
  #screenContent { padding-right: 12px; padding-left: 12px; }
  .bottom-nav { width: calc(100% - 16px); }
  .nav-item { min-height: 52px; font-size: 11px; }
  .nav-item i { font-size: 16px; }
  .tracker-card, .ng-card, .meal-card, .workout-card, .community-post { border-radius: 19px !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .app-header, .bottom-nav, .ng-card, .ng-card-light, .meal-card, .workout-card, .community-post, .recipe-card, .supp-card, .chat-input-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}