:root{
  --glass-bg: rgba(255,255,255,.10);
  --glass-brd: rgba(255,255,255,.22);
  --txt: #f5f7ff;
  --muted: rgba(245,247,255,.62);
  --accent: #7be3a3;
  --accent2: #6fb4ff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  color:var(--txt);
  background:#0b1020;
  padding:16px 14px 40px;
}
.glass-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(1200px 600px at 10% -10%, #2b3c8f 0%, transparent 60%),
  radial-gradient(900px 500px at 110% 10%, #17705c 0%, transparent 55%),
  linear-gradient(160deg,#0b1020,#111a35 60%,#0b1020);}
.glass-bg span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:float 18s ease-in-out infinite}
.glass-bg span:nth-child(1){width:260px;height:260px;background:#6fb4ff;top:8%;left:-60px}
.glass-bg span:nth-child(2){width:300px;height:300px;background:#7be3a3;bottom:6%;right:-80px;animation-delay:-6s}
.glass-bg span:nth-child(3){width:220px;height:220px;background:#c58bff;top:45%;left:45%;animation-delay:-12s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-38px,0)}}

.wrap{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius:24px;
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.card{padding:18px}
.head{display:flex;align-items:center;justify-content:space-between;gap:12px}
h1{margin:2px 0 0;font-size:22px;font-weight:700}
h2{margin:0 0 12px;font-size:15px;font-weight:600;opacity:.9}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px}
.center{text-align:center}
.score{font-size:15px;font-weight:700;padding:10px 14px;border-radius:16px;
  background:rgba(255,255,255,.12);border:1px solid var(--glass-brd)}

.ring-row{display:flex;align-items:center;gap:18px}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.ring-bg{stroke:rgba(255,255,255,.14)}
.ring-fg{stroke:url(#g);stroke:var(--accent);transition:stroke-dashoffset .8s ease}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-label b{font-size:26px}
.ring-label small{color:var(--muted);font-size:12px}
.macros{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.macro{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.macro span{font-size:11px;color:var(--muted)}
.macro b{font-size:16px}

.chart{display:flex;align-items:flex-end;gap:8px;height:120px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.bar i{width:100%;border-radius:10px 10px 6px 6px;background:linear-gradient(180deg,var(--accent2),var(--accent));
  margin-top:auto;min-height:6px;box-shadow:0 4px 18px rgba(111,180,255,.35)}
.bar em{font-style:normal;font-size:10px;color:var(--muted)}

.meals{display:flex;flex-direction:column;gap:10px}
.meal{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:18px;padding:12px 14px}
.meal-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.meal-top b{font-size:15px}
.meal-top span{font-size:12px;color:var(--muted)}
.meal-sub{margin-top:4px;font-size:12px;color:var(--muted)}
.ings{margin:8px 0 0;padding-left:16px;font-size:12px;color:var(--muted)}
.hp{display:inline-block;margin-top:8px;font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(123,227,163,.18);border:1px solid rgba(123,227,163,.35)}
.hp.bad{background:rgba(255,120,120,.16);border-color:rgba(255,120,120,.35)}
.btn{padding:14px;border:1px solid var(--glass-brd);color:var(--txt);font-size:15px;
  font-weight:600;border-radius:20px;cursor:pointer}
.btn:active{transform:scale(.98)}