:root {
  --oia-glass-line: rgba(255,255,255,.20);
  --oia-glass-shadow: 0 24px 60px rgba(0,31,13,.30);
}

body .app {
  background:
    radial-gradient(ellipse at 72% 10%, rgba(218,255,139,.44), transparent 31%),
    radial-gradient(ellipse at 25% 76%, rgba(55,231,126,.25), transparent 39%),
    linear-gradient(145deg, #082f18 0%, #08713a 52%, #274f19 100%);
}

body .main::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 56vw;
  height: 28vw;
  left: 27vw;
  top: 18vh;
  border: 2px solid rgba(221,255,130,.20);
  border-radius: 50%;
  transform: rotate(12deg);
  filter: drop-shadow(0 0 18px rgba(220,255,133,.20));
  pointer-events: none;
}

body .card,
body .settings-card,
body .calendar-shell,
body .daily-food-card,
body .metric-chart-card,
body .timer-card {
  border: 1px solid var(--oia-glass-line);
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(230,249,222,.73) 48%, rgba(194,229,185,.68));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(16,70,36,.10), var(--oia-glass-shadow);
  backdrop-filter: blur(26px) saturate(1.18);
}

body .card,
body .settings-card,
body .daily-food-card,
body .metric-chart-card { position: relative; overflow: hidden; }
body .card::before,
body .settings-card::before,
body .daily-food-card::before,
body .metric-chart-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: 68%;
  height: 120px;
  left: -8%;
  top: -88px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  filter: blur(18px);
  transform: rotate(-7deg);
}
body .card > *, body .settings-card > *, body .daily-food-card > *, body .metric-chart-card > * { position: relative; z-index: 1; }

body .nav button.active,
body .nav button:hover {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.08));
  box-shadow: inset 0 1px rgba(255,255,255,.17), 0 10px 24px rgba(0,27,11,.16);
}

body .weather,
body .profile,
body .activity-date-chip {
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(0,51,24,.28));
  box-shadow: inset 0 1px rgba(255,255,255,.20), 0 14px 30px rgba(0,28,11,.18);
  backdrop-filter: blur(22px) saturate(1.2);
}

body button,
body .progress-import {
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
body button:active { transform: scale(.97); }

body .meal-analysis-button,
body .save-profile,
body .save-settings,
body .timer-start {
  border: 1px solid rgba(255,255,255,.32);
  background: linear-gradient(145deg, #caff5e, #46c839 48%, #08783b);
  color: #fff;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.38), inset 0 -4px 8px rgba(0,81,31,.22), 0 15px 30px rgba(0,62,27,.24);
}

body dialog,
body .settings-dialog {
  border: 1px solid rgba(255,255,255,.28);
  background: radial-gradient(circle at 12% 0%, rgba(224,255,153,.22), transparent 32%), linear-gradient(150deg, rgba(243,255,237,.97), rgba(214,240,205,.96));
  box-shadow: 0 34px 90px rgba(0,28,12,.38), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(28px) saturate(1.2);
}

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}