:root { color-scheme: dark; --bg:#101114; --panel:#191b21; --line:#2b2e37; --text:#f2f3f5; --muted:#989da9; --accent:#72e0b0; --pink:#ff8ea1; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.app { max-width:760px; margin:0 auto; padding:24px 16px 48px; }
header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }
h1,h2,p { margin:0; } h1 { font-size:30px; letter-spacing:-.04em; } h2 { font-size:16px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; margin-bottom:5px; } header p:not(.eyebrow),.muted { color:var(--muted); font-size:13px; }
button,select { color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px 11px; }
.nav-link { color:var(--accent); text-decoration:none; font-size:13px; }
.cards { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-bottom:12px; } .card { background:var(--panel); padding:14px; border-radius:14px; border:1px solid var(--line); } .card strong { display:block; font-size:22px; } .card span,.card small { display:block; color:var(--muted); font-size:12px; } .card small { opacity:.65; font-size:10px; margin-top:2px; }
.health-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; } .health-card { background:#15171c; border:1px solid var(--line); border-radius:11px; padding:10px; } .health-card strong { display:block; font-size:17px; } .health-card span { display:block; color:var(--muted); font-size:10px; margin-top:2px; } .health-details { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:11px; margin-top:10px; } .health-chart { min-height:145px; display:flex; align-items:flex-end; gap:6px; overflow-x:auto; padding-top:18px; } .health-day { flex:1 0 30px; min-width:30px; text-align:center; } .health-pulse { color:var(--muted); font-size:8px; margin-bottom:4px; } .health-bars { height:92px; display:flex; align-items:flex-end; justify-content:center; gap:2px; } .health-bars i { display:block; width:9px; min-height:0; border-radius:3px 3px 0 0; } .health-step { background:var(--accent); } .health-sleep { background:var(--pink); } .health-day > span { color:var(--muted); font-size:9px; }
.wellbeing-panel .panel-title { align-items:flex-start; } .wellbeing-panel select { flex:0 0 auto; } .metric-filters { display:flex; gap:7px; overflow-x:auto; padding:1px 1px 10px; scrollbar-width:none; } .metric-filters::-webkit-scrollbar { display:none; } .metric-chip { display:flex; align-items:center; gap:6px; flex:0 0 auto; padding:7px 10px; border-radius:99px; color:var(--muted); font-size:11px; white-space:nowrap; } .metric-chip i,.metric-legend i { width:8px; height:8px; border-radius:50%; flex:0 0 auto; } .metric-chip.active { color:var(--text); background:#252830; border-color:#4a4f5d; } .line-chart-wrap { min-height:260px; overflow-x:auto; background:#15171c; border:1px solid var(--line); border-radius:12px; } .line-chart { display:block; width:100%; height:260px; } .line-grid { stroke:#2c3039; stroke-width:1; } .line-axis,.line-date { fill:var(--muted); font-size:9px; } .metric-line { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .metric-dot { stroke:#15171c; stroke-width:2; } .metric-legend { display:flex; flex-wrap:wrap; gap:7px 14px; margin-top:10px; color:var(--muted); font-size:10px; } .metric-legend span { display:flex; align-items:center; gap:5px; } .chart-note { margin-top:8px; color:var(--muted); font-size:10px; } .chart-empty { padding:24px 14px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; } .panel-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.bar-row { display:grid; grid-template-columns:82px 1fr 55px; gap:8px; align-items:center; margin:10px 0; font-size:13px; } .bar-track { height:9px; background:#292c34; border-radius:99px; overflow:hidden; } .bar-fill { height:100%; border-radius:99px; background:var(--accent); } .bar-row:nth-child(2n) .bar-fill { background:var(--pink); }
.chart { min-height:160px; display:flex; align-items:end; gap:5px; padding-top:15px; } .day { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; } .day-stack { height:120px; width:100%; display:flex; flex-direction:column; justify-content:end; gap:2px; } .day-stack.paired { flex-direction:row; align-items:end; } .day-stack.paired .day-segment { width:50%; } .day-segment { min-height:2px; background:var(--accent); border-radius:3px 3px 0 0; } .checkin-segment { background:var(--accent); } .event-segment { background:var(--pink); } .day-label { color:var(--muted); font-size:10px; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .day-total { font-size:10px; color:var(--text); }
.scroll-chart { overflow-x:auto; justify-content:flex-start; padding-bottom:5px; } .scroll-chart .day { flex:1 0 24px; } .money-chart { min-height:150px; } .money-chart .day-stack { height:105px; } .nicotine-segment { min-height:0; background:var(--pink); } .nicotine-panel .panel-title { align-items:flex-start; } .nicotine-panel .panel-title strong { color:var(--pink); font-size:20px; white-space:nowrap; }
.heatmap { display:grid; grid-template-columns:repeat(24,1fr); gap:3px; overflow:auto; } .heat-cell { aspect-ratio:1; min-width:11px; border-radius:3px; background:#272a31; } .heat-name { grid-column:1/-1; margin-top:8px; font-size:12px; } .legend { display:flex; gap:16px; justify-content:center; margin-top:10px; color:var(--muted); font-size:11px; } .legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; } .checkin-dot { background:var(--accent); } .event-dot { background:var(--pink); } .spaced { margin-top:12px; }
.workout,.session { padding:11px 0; border-bottom:1px solid var(--line); } .workout:last-child,.session:last-child { border-bottom:0; } .meta { color:var(--muted); font-size:12px; } .session-title { margin-top:2px; } .badge { display:inline-block; padding:2px 7px; border-radius:99px; color:#101114; background:var(--accent); font-size:11px; margin-right:5px; } .event-badge { background:var(--pink); }
.workout-page header { align-items:center; } .back-link { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; color:var(--text); text-decoration:none; background:var(--panel); border:1px solid var(--line); border-radius:11px; font-size:20px; }
.calendar-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; } .calendar { background:#15171c; border:1px solid var(--line); border-radius:13px; padding:12px; } .calendar h3 { margin:0 0 10px; font-size:14px; text-transform:capitalize; } .calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; } .calendar-weekday { color:var(--muted); font-size:9px; padding:3px 0; } .calendar-day { position:relative; min-height:29px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--muted); font-size:11px; } .calendar-day.active { color:#101114; background:var(--accent); font-weight:800; } .calendar-day.active.multiple::after { content:attr(data-count); position:absolute; right:2px; top:1px; font-size:7px; }
.journal-workout { padding:15px 0; border-bottom:1px solid var(--line); } .journal-workout:last-child { border-bottom:0; } .journal-date { font-size:17px; font-weight:750; margin-bottom:9px; } .exercise-row { display:grid; grid-template-columns:minmax(105px,1fr) 1.6fr; gap:10px; padding:6px 0; } .exercise-name { font-weight:600; } .exercise-sets { color:var(--muted); } .exercise-note { grid-column:2; color:var(--pink); font-size:11px; margin-top:-5px; }
.error { color:var(--pink); margin:12px 0; } @media (max-width:460px) { .cards,.health-kpis { grid-template-columns:repeat(2,1fr); } .card { padding:10px; } .card strong { font-size:18px; } .bar-row { grid-template-columns:100px 1fr 34px; } }