{"project":{"id":"uxBOPwE","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Fitness pro","visible":true,"contributors":"","githubRepo":"davidyarham/blnq-fitness-pro","forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"\n\n\n \n \n Untitled\n \n\n\n\n\n\n\n\n
\n\t
\n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t

WEDNESDAY, JAN 15

\n\t\t\t\t

Good morning,
David

\n\t\t\t
\n\t\t\t
\n\t\t\t\t\"Avatar\"\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t85\n\t\t\t\t\tHEALTH SCORE\n\t\t\t\t
\n\t\t\t
\n\t\t\t
\n\t\t\t\tSLEEP \n\t\t\t\tACTIVITY \n\t\t\t\tRECOVERY \n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

VITALS

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t72 bpm\n\t\t\t\t\tHEART RATE\n\t\t\t\t\t 3%\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t8,432\n\t\t\t\t\tSTEPS\n\t\t\t\t\t 12%\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t1,847 kcal\n\t\t\t\t\tCALORIES\n\t\t\t\t\t 8%\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t47 min\n\t\t\t\t\tACTIVE\n\t\t\t\t\t 5%\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

SLEEP SUMMARY

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t7h 23m\n\t\t\t\t\t\tDURATION\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t82\n\t\t\t\t\t\tQUALITY SCORE\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\tDeep\n\t\t\t\t\t\t1h 37m\n\t\t\t\t\t\tLight\n\t\t\t\t\t\t3h 19m\n\t\t\t\t\t\tREM\n\t\t\t\t\t\t1h 28m\n\t\t\t\t\t\tAwake\n\t\t\t\t\t\t59m\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

ACTIVITY something

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t8,432\n\t\t\t\t\t/ 10,000\n\t\t\t\t\tSTEPS\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t432\n\t\t\t\t\t/ 600 kcal\n\t\t\t\t\tACTIVE CAL\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t47\n\t\t\t\t\t/ 60 min\n\t\t\t\t\tEXERCISE\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

HYDRATION

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t5 / 8 glasses\n\t\t\t\t\t\t1.25L OF 2.0L TARGET\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

WEEKLY STEPS

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tM\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tT\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tW\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tT\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tF\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tS\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\tS\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tAVG 7,892 steps/day\n\t\t\t\t\t 6% vs last week\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

BODY METRICS

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t74.2 kg\n\t\t\t\t\t\tWEIGHT\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t22.8\n\t\t\t\t\t\tBMI\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t16.3 %\n\t\t\t\t\t\tBODY FAT\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t\tWEIGHT — LAST 30 DAYS\n\t\t\t
\n\t\t
\n\n\t\t\n\t\t
\n\t\t\t

MINDFULNESS

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tLow\n\t\t\t\t\t\t\tSTRESS LEVEL\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t12 min\n\t\t\t\t\t\t\tMEDITATION\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t
\n\t
\n\n\t\n\t\n
\n \n\n"},{"name":"main.js","content":"// Initialize Lucide icons\nlucide.createIcons();\n\n// Sparkline Canvas\nfunction drawSparkline() {\n\tconst canvas = document.getElementById('sparkline');\n\tif (!canvas) return;\n\n\tconst ctx = canvas.getContext('2d');\n\tconst dpr = window.devicePixelRatio || 1;\n\tconst rect = canvas.getBoundingClientRect();\n\n\tcanvas.width = rect.width * dpr;\n\tcanvas.height = rect.height * dpr;\n\tctx.scale(dpr, dpr);\n\n\t// Weight data over 30 days (simulated slight downtrend)\n\tconst data = [75.8, 75.6, 75.9, 75.5, 75.3, 75.4, 75.1, 75.0, 74.8, 75.1,\n\t\t75.0, 74.7, 74.9, 74.6, 74.8, 74.5, 74.7, 74.4, 74.6, 74.3,\n\t\t74.5, 74.2, 74.4, 74.1, 74.3, 74.0, 74.2, 74.1, 74.3, 74.2\n\t];\n\n\tconst min = Math.min(...data) - 0.3;\n\tconst max = Math.max(...data) + 0.3;\n\tconst w = rect.width;\n\tconst h = rect.height;\n\tconst padding = 2;\n\n\tconst points = data.map((v, i) => ({\n\t\tx: padding + (i / (data.length - 1)) * (w - padding * 2),\n\t\ty: padding + ((max - v) / (max - min)) * (h - padding * 2)\n\t}));\n\n\t// Gradient fill\n\tconst gradient = ctx.createLinearGradient(0, 0, 0, h);\n\tgradient.addColorStop(0, 'rgba(200, 255, 0, 0.15)');\n\tgradient.addColorStop(1, 'rgba(200, 255, 0, 0)');\n\n\t// Fill area\n\tctx.beginPath();\n\tctx.moveTo(points[0].x, h);\n\tpoints.forEach(p => ctx.lineTo(p.x, p.y));\n\tctx.lineTo(points[points.length - 1].x, h);\n\tctx.closePath();\n\tctx.fillStyle = gradient;\n\tctx.fill();\n\n\t// Line\n\tctx.beginPath();\n\tpoints.forEach((p, i) => {\n\t\tif (i === 0) ctx.moveTo(p.x, p.y);\n\t\telse ctx.lineTo(p.x, p.y);\n\t});\n\tctx.strokeStyle = '#C8FF00';\n\tctx.lineWidth = 1.5;\n\tctx.lineJoin = 'round';\n\tctx.stroke();\n\n\t// End dot\n\tconst last = points[points.length - 1];\n\tctx.beginPath();\n\tctx.arc(last.x, last.y, 3, 0, Math.PI * 2);\n\tctx.fillStyle = '#C8FF00';\n\tctx.fill();\n}\n\ndrawSparkline();\nwindow.addEventListener('resize', drawSparkline);\n\n// Hydration add button\nlet waterCount = 5;\nconst addBtn = document.getElementById('addWater');\n\nif (addBtn) {\n\taddBtn.addEventListener('click', () => {\n\t\tif (waterCount >= 8) return;\n\t\twaterCount++;\n\n\t\tconst glasses = document.querySelectorAll('.hydration-glass');\n\t\tglasses.forEach((g, i) => {\n\t\t\tif (i < waterCount) {\n\t\t\t\tg.classList.add('hydration-glass--filled');\n\t\t\t}\n\t\t});\n\n\t\t// Update bar\n\t\tconst barFill = document.querySelector('.hydration-bar__fill');\n\t\tif (barFill) {\n\t\t\tbarFill.style.width = ((waterCount / 8) * 100) + '%';\n\t\t}\n\n\t\t// Update text\n\t\tconst valueEl = document.querySelector('.hydration-card__value');\n\t\tif (valueEl) {\n\t\t\tvalueEl.innerHTML = `${waterCount} / 8 glasses`;\n\t\t}\n\n\t\tconst liters = (waterCount * 0.25).toFixed(2);\n\t\tconst subEl = document.querySelector('.hydration-card__sublabel');\n\t\tif (subEl) {\n\t\t\tsubEl.textContent = `${liters}L OF 2.0L TARGET`;\n\t\t}\n\n\t\t// Re-init icons for new filled states\n\t\tlucide.createIcons();\n\t});\n}\n\n// Bottom nav interaction\ndocument.querySelectorAll('.bottom-nav__item').forEach(item => {\n\titem.addEventListener('click', () => {\n\t\tdocument.querySelectorAll('.bottom-nav__item').forEach(i => i.classList.remove('bottom-nav__item--active'));\n\t\titem.classList.add('bottom-nav__item--active');\n\t});\n});"},{"name":"style.css","content":":root {\n\tcolor-scheme: dark;\n\t--black: #0D0D0D;\n\t--card: #1A1C1E;\n\t--lime: #C8FF00;\n\t--white: #FFFFFF;\n\t--gray: #888888;\n\t--gray-dark: #555555;\n\t--border: rgba(255, 255, 255, 0.08);\n\t--radius: 15px;\n\tfont-family: 'Inter', sans-serif;\n}\n\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nbody {\n\tbackground: var(--black);\n\tcolor: var(--white);\n\t-webkit-font-smoothing: antialiased;\n}\n\n.app {\n\tmax-width: 420px;\n\tmargin: 0 auto;\n\tmin-height: 100vh;\n\tmin-height: 100dvh;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--black);\n\tposition: relative;\n}\n\n.scroll-container {\n\tflex: 1;\n\toverflow-y: auto;\n\tpadding: 20px 18px;\n\tpadding-bottom: 100px;\n}\n\n/* ===== HEADER ===== */\n.header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 28px;\n\tpadding-top: 8px;\n}\n\n.header__date {\n\tfont-size: 11px;\n\tletter-spacing: 1.5px;\n\tcolor: var(--gray);\n\tmargin-bottom: 6px;\n\tfont-weight: 500;\n}\n\n.header__greeting {\n\tfont-size: 26px;\n\tfont-weight: 400;\n\tline-height: 1.25;\n\tcolor: rgba(255, 255, 255, 0.6);\n}\n\n.header__name {\n\tfont-weight: 700;\n\tcolor: var(--white);\n}\n\n.header__avatar {\n\twidth: 48px;\n\theight: 48px;\n\tborder-radius: 50%;\n\toverflow: hidden;\n\tborder: 2px solid var(--lime);\n\tflex-shrink: 0;\n}\n\n.header__avatar img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n\n/* ===== HEALTH SCORE ===== */\n.health-score {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tmargin-bottom: 32px;\n\tposition: relative;\n}\n\n.health-score__ring {\n\tposition: relative;\n\twidth: 160px;\n\theight: 160px;\n}\n\n.health-score__svg {\n\twidth: 100%;\n\theight: 100%;\n\ttransform: rotate(-90deg);\n}\n\n.health-score__track {\n\tfill: none;\n\tstroke: var(--card);\n\tstroke-width: 8;\n}\n\n.health-score__fill {\n\tfill: none;\n\tstroke: var(--lime);\n\tstroke-width: 8;\n\tstroke-linecap: round;\n\ttransition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.health-score__value {\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.health-score__number {\n\tfont-size: 48px;\n\tfont-weight: 800;\n\tline-height: 1;\n\tletter-spacing: -2px;\n}\n\n.health-score__label {\n\tfont-size: 9px;\n\tletter-spacing: 2px;\n\tcolor: var(--gray);\n\tmargin-top: 4px;\n\tfont-weight: 600;\n}\n\n.health-score__tags {\n\tdisplay: flex;\n\tgap: 8px;\n\tmargin-top: 16px;\n}\n\n.tag {\n\tfont-size: 10px;\n\tletter-spacing: 1px;\n\tfont-weight: 600;\n\tpadding: 5px 10px;\n\tborder-radius: 20px;\n\tbackground: var(--card);\n\tborder: 1px solid var(--border);\n\tcolor: var(--gray);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n}\n\n.tag--active {\n\tborder-color: rgba(200, 255, 0, 0.25);\n\tcolor: var(--lime);\n}\n\n.tag--warn {\n\tborder-color: rgba(255, 180, 50, 0.25);\n\tcolor: #FFB432;\n}\n\n.tag__icon {\n\twidth: 10px;\n\theight: 10px;\n}\n\n/* ===== SECTION ===== */\n.section {\n\tmargin-bottom: 28px;\n}\n\n.section--last {\n\tmargin-bottom: 0;\n}\n\n.section__title {\n\tfont-size: 11px;\n\tletter-spacing: 2px;\n\tfont-weight: 700;\n\tcolor: var(--white);\n\tmargin-bottom: 14px;\n}\n\n/* ===== CARD ===== */\n.card {\n\tbackground: var(--card);\n\tborder: 1px solid var(--border);\n\tborder-radius: var(--radius);\n\tpadding: 20px;\n}\n\n/* ===== VITALS GRID ===== */\n.vitals-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, 1fr);\n\tgap: 10px;\n}\n\n.vital-card {\n\tbackground: var(--card);\n\tborder: 1px solid var(--border);\n\tborder-radius: var(--radius);\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 4px;\n}\n\n.vital-card__icon-wrap {\n\tmargin-bottom: 4px;\n}\n\n.vital-card__icon {\n\twidth: 18px;\n\theight: 18px;\n\tcolor: var(--gray-dark);\n}\n\n.vital-card__icon--hr {\n\tcolor: #FF4D6A;\n}\n\n.vital-card__icon--cal {\n\tcolor: #FF8C42;\n}\n\n.vital-card__value {\n\tfont-size: 24px;\n\tfont-weight: 800;\n\tline-height: 1;\n\tletter-spacing: -0.5px;\n}\n\n.vital-card__value small {\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--gray);\n}\n\n.vital-card__label {\n\tfont-size: 10px;\n\tletter-spacing: 1.2px;\n\tfont-weight: 600;\n\tcolor: var(--gray);\n}\n\n.vital-card__trend {\n\tfont-size: 11px;\n\tfont-weight: 600;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 3px;\n\tmargin-top: 2px;\n}\n\n.vital-card__trend--up {\n\tcolor: var(--lime);\n}\n\n.vital-card__trend--down {\n\tcolor: #FF4D6A;\n}\n\n.trend-icon {\n\twidth: 13px;\n\theight: 13px;\n}\n\n.trend-icon--lime {\n\tcolor: var(--lime);\n}\n\n/* ===== SLEEP CARD ===== */\n.sleep-card__top {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-start;\n\tmargin-bottom: 20px;\n}\n\n.sleep-card__stat--right {\n\ttext-align: right;\n}\n\n.sleep-card__big {\n\tfont-size: 28px;\n\tfont-weight: 800;\n\tline-height: 1;\n\tletter-spacing: -1px;\n}\n\n.sleep-card__big small {\n\tfont-size: 15px;\n\tfont-weight: 500;\n\tcolor: var(--gray);\n}\n\n.sleep-card__sublabel {\n\tfont-size: 10px;\n\tletter-spacing: 1.2px;\n\tfont-weight: 600;\n\tcolor: var(--gray);\n\tdisplay: block;\n\tmargin-top: 5px;\n}\n\n.sleep-bar {\n\tdisplay: flex;\n\theight: 10px;\n\tborder-radius: 5px;\n\toverflow: hidden;\n\tgap: 2px;\n\tmargin-bottom: 14px;\n}\n\n.sleep-bar__segment {\n\tborder-radius: 5px;\n\ttransition: width 0.8s ease;\n}\n\n.sleep-bar__segment--deep {\n\tbackground: var(--lime);\n}\n\n.sleep-bar__segment--light {\n\tbackground: rgba(200, 255, 0, 0.4);\n}\n\n.sleep-bar__segment--rem {\n\tbackground: rgba(200, 255, 0, 0.2);\n}\n\n.sleep-bar__segment--awake {\n\tbackground: rgba(255, 255, 255, 0.1);\n}\n\n.sleep-legend {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tgap: 6px 16px;\n}\n\n.sleep-legend__item {\n\tfont-size: 11px;\n\tcolor: var(--gray);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n}\n\n.sleep-legend__dot {\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n}\n\n.sleep-legend__dot--deep {\n\tbackground: var(--lime);\n}\n\n.sleep-legend__dot--light {\n\tbackground: rgba(200, 255, 0, 0.4);\n}\n\n.sleep-legend__dot--rem {\n\tbackground: rgba(200, 255, 0, 0.2);\n}\n\n.sleep-legend__dot--awake {\n\tbackground: rgba(255, 255, 255, 0.1);\n}\n\n/* ===== ACTIVITY RINGS ===== */\n.activity-grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 10px;\n}\n\n.activity-ring-card {\n\tbackground: var(--card);\n\tborder: 1px solid var(--border);\n\tborder-radius: var(--radius);\n\tpadding: 18px 12px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 2px;\n}\n\n.activity-ring {\n\tposition: relative;\n\twidth: 80px;\n\theight: 80px;\n\tmargin-bottom: 8px;\n}\n\n.activity-ring svg {\n\twidth: 100%;\n\theight: 100%;\n\ttransform: rotate(-90deg);\n}\n\n.activity-ring__track {\n\tfill: none;\n\tstroke: rgba(255, 255, 255, 0.06);\n\tstroke-width: 7;\n}\n\n.activity-ring__fill {\n\tfill: none;\n\tstroke-width: 7;\n\tstroke-linecap: round;\n\ttransition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.activity-ring__fill--steps {\n\tstroke: var(--lime);\n}\n\n.activity-ring__fill--cal {\n\tstroke: #FF8C42;\n}\n\n.activity-ring__fill--exercise {\n\tstroke: #4DA8FF;\n}\n\n.activity-ring__center {\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.activity-ring__icon {\n\twidth: 20px;\n\theight: 20px;\n\tcolor: var(--gray);\n}\n\n.activity-ring-card__value {\n\tfont-size: 18px;\n\tfont-weight: 800;\n\tline-height: 1;\n}\n\n.activity-ring-card__target {\n\tfont-size: 11px;\n\tcolor: var(--gray);\n\tfont-weight: 500;\n}\n\n.activity-ring-card__label {\n\tfont-size: 9px;\n\tletter-spacing: 1px;\n\tfont-weight: 700;\n\tcolor: var(--gray);\n\tmargin-top: 4px;\n}\n\n/* ===== HYDRATION ===== */\n.hydration-card__top {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 18px;\n}\n\n.hydration-card__value {\n\tfont-size: 26px;\n\tfont-weight: 800;\n\tline-height: 1;\n}\n\n.hydration-card__value small {\n\tfont-size: 14px;\n\tfont-weight: 500;\n\tcolor: var(--gray);\n}\n\n.hydration-card__sublabel {\n\tfont-size: 10px;\n\tletter-spacing: 1.2px;\n\tfont-weight: 600;\n\tcolor: var(--gray);\n\tdisplay: block;\n\tmargin-top: 5px;\n}\n\n.hydration-card__add {\n\twidth: 44px;\n\theight: 44px;\n\tborder-radius: 50%;\n\tbackground: var(--lime);\n\tborder: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition: transform 0.15s ease, box-shadow 0.15s ease;\n\t/* Hazard stripe texture */\n\tbackground-image: repeating-linear-gradient(-45deg,\n\t\t\ttransparent,\n\t\t\ttransparent 3px,\n\t\t\trgba(0, 0, 0, 0.12) 3px,\n\t\t\trgba(0, 0, 0, 0.12) 6px);\n\tbackground-color: var(--lime);\n}\n\n.hydration-card__add:active {\n\ttransform: scale(0.92);\n}\n\n.hydration-card__add-icon {\n\twidth: 22px;\n\theight: 22px;\n\tcolor: var(--black);\n}\n\n.hydration-glasses {\n\tdisplay: flex;\n\tgap: 8px;\n\tmargin-bottom: 14px;\n}\n\n.hydration-glass {\n\tflex: 1;\n\theight: 36px;\n\tborder-radius: 8px;\n\tbackground: rgba(255, 255, 255, 0.04);\n\tborder: 1px solid var(--border);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\ttransition: all 0.3s ease;\n}\n\n.hydration-glass svg,\n.hydration-glass i {\n\twidth: 16px;\n\theight: 16px;\n\tcolor: rgba(255, 255, 255, 0.15);\n}\n\n.hydration-glass--filled {\n\tbackground: rgba(200, 255, 0, 0.12);\n\tborder-color: rgba(200, 255, 0, 0.25);\n}\n\n.hydration-glass--filled svg,\n.hydration-glass--filled i {\n\tcolor: var(--lime);\n}\n\n.hydration-bar {\n\theight: 4px;\n\tbackground: rgba(255, 255, 255, 0.06);\n\tborder-radius: 2px;\n\toverflow: hidden;\n}\n\n.hydration-bar__fill {\n\theight: 100%;\n\tbackground: var(--lime);\n\tborder-radius: 2px;\n\ttransition: width 0.6s ease;\n}\n\n/* ===== WEEKLY CHART ===== */\n.weekly-chart {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: flex-end;\n\theight: 120px;\n\tgap: 6px;\n\tmargin-bottom: 16px;\n}\n\n.weekly-chart__bar-group {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\theight: 100%;\n\tgap: 8px;\n}\n\n.weekly-chart__bar-track {\n\tflex: 1;\n\twidth: 100%;\n\tmax-width: 32px;\n\tbackground: rgba(255, 255, 255, 0.04);\n\tborder-radius: 6px;\n\tdisplay: flex;\n\talign-items: flex-end;\n\toverflow: hidden;\n}\n\n.weekly-chart__bar-fill {\n\twidth: 100%;\n\tbackground: rgba(200, 255, 0, 0.35);\n\tborder-radius: 6px;\n\ttransition: height 1s cubic-bezier(0.4, 0, 0.2, 1);\n\tmin-height: 0;\n}\n\n.weekly-chart__bar-fill--active {\n\tbackground: var(--lime);\n\t/* Hazard stripe texture */\n\tbackground-image: repeating-linear-gradient(-45deg,\n\t\t\ttransparent,\n\t\t\ttransparent 2px,\n\t\t\trgba(0, 0, 0, 0.1) 2px,\n\t\t\trgba(0, 0, 0, 0.1) 4px);\n\tbackground-color: var(--lime);\n}\n\n.weekly-chart__bar-fill--future {\n\tbackground: rgba(255, 255, 255, 0.03);\n}\n\n.weekly-chart__day {\n\tfont-size: 11px;\n\tfont-weight: 600;\n\tcolor: var(--gray-dark);\n\tletter-spacing: 0.5px;\n}\n\n.weekly-chart__day--active {\n\tcolor: var(--lime);\n}\n\n.weekly-chart__day--future {\n\tcolor: rgba(255, 255, 255, 0.15);\n}\n\n.weekly-card__footer {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n}\n\n.weekly-card__avg {\n\tfont-size: 12px;\n\tcolor: var(--gray);\n}\n\n.weekly-card__avg strong {\n\tcolor: var(--white);\n\tfont-weight: 700;\n}\n\n.weekly-card__trend {\n\tfont-size: 12px;\n\tcolor: var(--lime);\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n}\n\n/* ===== BODY CARD ===== */\n.body-card__metrics {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tmargin-bottom: 18px;\n}\n\n.body-card__metric {\n\tflex: 1;\n\ttext-align: center;\n}\n\n.body-card__divider {\n\twidth: 1px;\n\theight: 36px;\n\tbackground: var(--border);\n}\n\n.body-card__value {\n\tfont-size: 22px;\n\tfont-weight: 800;\n\tline-height: 1;\n\tdisplay: block;\n}\n\n.body-card__value small {\n\tfont-size: 13px;\n\tfont-weight: 500;\n\tcolor: var(--gray);\n}\n\n.body-card__label {\n\tfont-size: 10px;\n\tletter-spacing: 1.2px;\n\tfont-weight: 600;\n\tcolor: var(--gray);\n\tdisplay: block;\n\tmargin-top: 5px;\n}\n\n.body-card__sparkline {\n\twidth: 100%;\n\theight: 50px;\n\tdisplay: block;\n}\n\n.body-card__sparkline-label {\n\tfont-size: 9px;\n\tletter-spacing: 1.5px;\n\tcolor: var(--gray-dark);\n\tfont-weight: 600;\n\tdisplay: block;\n\tmargin-top: 8px;\n\ttext-align: center;\n}\n\n/* ===== MINDFUL CARD ===== */\n.mindful-card__row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 16px;\n}\n\n.mindful-card__item {\n\tflex: 1;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n}\n\n.mindful-card__icon {\n\twidth: 22px;\n\theight: 22px;\n\tcolor: var(--gray-dark);\n\tflex-shrink: 0;\n}\n\n.mindful-card__text {\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.mindful-card__value {\n\tfont-size: 16px;\n\tfont-weight: 700;\n\tline-height: 1.2;\n}\n\n.mindful-card__value small {\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tcolor: var(--gray);\n}\n\n.mindful-card__label {\n\tfont-size: 9px;\n\tletter-spacing: 1px;\n\tfont-weight: 600;\n\tcolor: var(--gray);\n}\n\n.mindful-card__divider {\n\twidth: 1px;\n\theight: 36px;\n\tbackground: var(--border);\n\tflex-shrink: 0;\n}\n\n.mindful-card__indicator {\n\tdisplay: flex;\n\tgap: 3px;\n\tmargin-left: auto;\n}\n\n.mindful-card__indicator span {\n\twidth: 6px;\n\theight: 18px;\n\tborder-radius: 3px;\n\tbackground: rgba(255, 255, 255, 0.08);\n}\n\n.mindful-card__indicator--low span:nth-child(1) {\n\tbackground: var(--lime);\n}\n\n.mindful-card__indicator--low span:nth-child(2) {\n\tbackground: rgba(200, 255, 0, 0.4);\n}\n\n/* ===== BOTTOM NAV ===== */\n.bottom-nav {\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\twidth: 100%;\n\tmax-width: 420px;\n\tbackground: rgba(13, 13, 13, 0.92);\n\tbackdrop-filter: blur(20px);\n\t-webkit-backdrop-filter: blur(20px);\n\tborder-top: 1px solid var(--border);\n\tdisplay: flex;\n\tjustify-content: space-around;\n\tpadding: 10px 0;\n\tpadding-bottom: max(10px, env(safe-area-inset-bottom));\n\tz-index: 100;\n}\n\n.bottom-nav__item {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tgap: 4px;\n\tcolor: var(--gray-dark);\n\ttext-decoration: none;\n\tcursor: pointer;\n\ttransition: color 0.2s ease;\n\t-webkit-tap-highlight-color: transparent;\n}\n\n.bottom-nav__item svg,\n.bottom-nav__item i {\n\twidth: 22px;\n\theight: 22px;\n\tstroke-width: 1.5;\n}\n\n.bottom-nav__item span {\n\tfont-size: 10px;\n\tfont-weight: 600;\n\tletter-spacing: 0.5px;\n}\n\n.bottom-nav__item--active {\n\tcolor: var(--lime);\n}\n\n/* ===== SCROLL ANIMATIONS ===== */\n@keyframes fadeSlideUp {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(30px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.section, .health-score {\n\tanimation: fadeSlideUp ease both;\n\tanimation-timeline: view();\n\tanimation-range: entry 0% entry 30%;\n}\n\n/* Load animations */\n@keyframes loadIn {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(20px);\n\t}\n\n\tto {\n\t\topacity: 1;\n\t\ttransform: translateY(0);\n\t}\n}\n\n.header {\n\tanimation: loadIn 0.6s ease both;\n}\n\n.health-score {\n\tanimation: loadIn 0.6s ease 0.1s both;\n}\n\n.section:nth-child(3) {\n\tanimation: loadIn 0.6s ease 0.2s both;\n}\n\n.section:nth-child(4) {\n\tanimation: loadIn 0.6s ease 0.25s both;\n}\n\n.section:nth-child(5) {\n\tanimation: loadIn 0.6s ease 0.3s both;\n}\n\n/* Scrollbar */\n.scroll-container::-webkit-scrollbar {\n\twidth: 0;\n\tdisplay: none;\n}\n\n.scroll-container {\n\tscrollbar-width: none;\n}"}],"folders":[]},"variants":null,"createdAt":"2026-02-21T19:35:15.719Z","updatedAt":"2026-03-03T17:35:21.591Z","hasThumbnail":true}}