/* Nutrivo — dashboard + tab bar redesign ("fresh editorial")
   Loaded after app.css + plan.css so it wins. */

:root{
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ink: #1d2733;
  --ink-soft: #5b6675;
  --c-carb: #e0a23d;
  --c-fat: #e2754e;
  --c-protein: #2aa6a0;
  --card-shadow: 0 8px 28px -14px rgba(29,39,51,.22);
  --card-line: rgba(29,39,51,.07);
}

body{ font-family: var(--font-body); color: var(--ink); }

/* ---------- Dashboard layout ---------- */
.dash{ display: grid; gap: 14px; }
.dash > *{ animation: dashIn .5s cubic-bezier(.22,.7,.3,1) both; }
.dash > *:nth-child(1){ animation-delay: .02s; }
.dash > *:nth-child(2){ animation-delay: .07s; }
.dash > *:nth-child(3){ animation-delay: .12s; }
.dash > *:nth-child(4){ animation-delay: .17s; }
.dash > *:nth-child(5){ animation-delay: .22s; }
@keyframes dashIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }

.statLabel{
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Hero ---------- */
.heroCard{
  position: relative; overflow: hidden; isolation: isolate;
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-radius: 24px; padding: 22px 22px 26px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(145deg, #2fb1ab 0%, #1f8f8a 55%, #18807b 100%);
  box-shadow: 0 16px 34px -16px rgba(24,128,123,.65);
  transition: transform .15s ease, box-shadow .2s ease;
}
.heroCard:active{ transform: scale(.985); }
.heroKicker{ font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.heroTitle{
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 600; font-size: 32px; line-height: 1.04; margin: 8px 0 6px; letter-spacing: -.01em;
}
.heroSub{ font-size: 14px; font-weight: 600; opacity: .9; max-width: 70%; }
.heroArrow{
  position: absolute; top: 22px; right: 20px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18); backdrop-filter: blur(2px);
}
.heroArrow svg{ width: 20px; height: 20px; color: #fff; }
.heroBlob{
  position: absolute; z-index: -1; right: -38px; bottom: -52px;
  width: 168px; height: 168px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
}

/* ---------- Stat grid (Calories / Protein) ---------- */
.statGrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.statCard{
  background: #fff; border: 1px solid var(--card-line); border-radius: 20px;
  padding: 16px 16px 18px; box-shadow: var(--card-shadow); min-width: 0;
}
.statBig{
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 600; font-size: 38px; line-height: 1; letter-spacing: -.02em;
  margin: 10px 0 4px; color: var(--ink);
}
.statSub{ font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.statSub b{ color: var(--ink); font-weight: 800; }
.statBar{ height: 7px; border-radius: 99px; background: #eeece6; overflow: hidden; margin-top: 12px; }
.statBarFill{
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width .6s cubic-bezier(.22,.7,.3,1);
}
.statBarPct{ margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--brand); }

/* ---------- Macros ---------- */
.macroCard, .dietCard{
  background: #fff; border: 1px solid var(--card-line); border-radius: 20px;
  padding: 18px; box-shadow: var(--card-shadow);
}
.macroBody{ display: flex; align-items: center; gap: 20px; margin-top: 14px; }
.macroRing{
  position: relative; width: 122px; height: 122px; flex: 0 0 auto;
  display: grid; place-items: center;
}
.macroRing::before{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(
    var(--c-carb) 0 var(--carbDeg, 0deg),
    var(--c-fat) var(--carbDeg, 0deg) var(--fatDeg, 0deg),
    var(--c-protein) var(--fatDeg, 0deg) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, #0000 61%, #000 62%);
          mask: radial-gradient(farthest-side, #0000 61%, #000 62%);
  transition: --carbDeg .5s, --fatDeg .5s;
}
.macroRing.is-empty::before{ background: #ecebe5; }
.macroRingMid{ position: relative; z-index: 1; text-align: center; line-height: 1; }
.macroRingMid b{ font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); }
.macroRingMid span{ display: block; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 3px; }
.macroLegend{ list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 12px; }
.macroLegend li{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mLeg{ display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--ink); }
.mDot{ width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.mDotCarb{ background: var(--c-carb); }
.mDotFat{ background: var(--c-fat); }
.mDotProtein{ background: var(--c-protein); }
.macroLegend b{ font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }

/* ---------- Diet ---------- */
.dietList{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.dietList li{
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--card-line);
}
.dietList li:last-child{ border-bottom: 0; }
.dIcon{
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(42,166,160,.1); font-size: 16px;
}
.dKey{ font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.dVal{ font-size: 14px; font-weight: 800; color: var(--ink); text-align: right; }

/* ---------- Primary CTA ---------- */
.planCta{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; cursor: pointer; text-align: left;
  border: 1px solid var(--card-line); border-radius: 20px; padding: 18px 20px;
  background: #fff; box-shadow: var(--card-shadow);
  transition: transform .15s ease, border-color .2s ease;
}
.planCta:active{ transform: scale(.99); }
.planCtaText b{ font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--ink); display: block; }
.planCtaText small{ display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.planCtaArrow{
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 8px 18px -8px rgba(31,143,138,.7);
}

/* ---------- Tab bar (consistent SVG icons, perfectly aligned) ---------- */
.tabbar{
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--card-line);
}
.tab{
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; padding: 9px 0 max(9px, env(safe-area-inset-bottom));
  background: none; border: 0; cursor: pointer; color: var(--ink-soft);
  transition: color .15s ease;
}
.tab .tabIcon{ width: 25px; height: 25px; display: block; }
.tab .tabIcon svg{ width: 100%; height: 100%; display: block; }
.tab .tabText{ font-size: 11px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.tab.active{ color: var(--brand); }
.tab.active .tabIcon{ transform: translateY(-1px); transition: transform .15s ease; }