* { box-sizing: border-box; }
:root { color-scheme: dark; --bg: var(--fp-bg-page); --surface: var(--fp-surface); --surface2: var(--fp-surface-raised); --border: var(--fp-border); --text: var(--fp-text-primary); --muted: var(--fp-text-muted); --accent: var(--fp-brand-primary); --green: var(--fp-success); --red:#d96f70; }
body { margin:0; min-height:100vh; font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text); background:radial-gradient(circle at top,rgba(14,165,233,.16),transparent 35%),var(--bg); }
button,input { font:inherit; }
.progress-page { width:min(1180px,calc(100% - 32px)); margin:auto; padding:32px 0 80px; }
.page-nav { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:42px; }.page-nav a { color:#bcc6c2; font-weight:750; text-decoration:none; }.page-nav .social-share-link{padding:10px 14px;border:1px solid rgba(53,207,223,.3);border-radius:11px;color:#d8fbff;background:rgba(53,207,223,.09)}
.page-header { max-width:780px; margin-bottom:30px; }.badge { display:inline-flex; padding:7px 12px; margin-bottom:14px; border:1px solid rgba(110, 159, 194,.35); border-radius:999px; color:#bcc6c2; background:rgba(110, 159, 194,.1); font-size:13px; font-weight:800; }
.page-header h1 { margin:0 0 12px; font-size:clamp(34px,6vw,58px); line-height:1; }.page-header p,.section-heading p { margin:0; color:var(--muted); line-height:1.6; }
.entry-card,.chart-card,.history-card,.measurements-card,.photos-card,.stat-card { border:1px solid var(--border); border-radius:20px; background:rgba(32, 43, 44,.94); box-shadow:0 20px 60px rgba(0,0,0,.2); }
.entry-card { padding:22px; margin-bottom:20px; }.entry-card form { display:grid; grid-template-columns:1fr 1fr auto; gap:14px; align-items:end; }.entry-card label { display:grid; gap:8px; color:#bcc6c2; font-weight:700; }.entry-card input { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; color:white; background:#101516; }
#saveWeightButton { min-height:46px; padding:10px 20px; border:0; border-radius:11px; color:white; background:linear-gradient(135deg,#5d93cc,#6e9fc2); font-weight:800; cursor:pointer; }.status { min-height:20px; margin:12px 0 0; color:#7fc8b4; }.status.error { color:#e39a9a; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }.stat-card { padding:20px; }.stat-card span { display:block; margin-bottom:10px; color:var(--muted); font-size:14px; }.stat-card strong { font-size:30px; }.positive { color:#7fc8b4; }.negative { color:#e39a9a; }
.chart-card,.history-card { padding:24px; margin-bottom:20px; }.section-heading { display:flex; justify-content:space-between; margin-bottom:20px; }.section-heading h2 { margin:0 0 5px; }.chart { min-height:310px; overflow-x:auto; }.chart svg { width:100%; min-width:620px; height:310px; }.chart-grid { stroke:rgba(255,255,255,.08); stroke-width:1; }.chart-line { fill:none; stroke:#6e9fc2; stroke-width:3; }.chart-area { fill:url(#areaGradient); }.chart-dot { fill:#8fb8cf; stroke:#07111f; stroke-width:2; }.axis-label { fill:#8e9d99; font-size:12px; }
.weight-history { display:grid; gap:9px; }.history-row { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.035); }.history-row strong { font-size:18px; }.delete-entry { width:34px; height:34px; border:1px solid rgba(251,113,133,.3); border-radius:9px; color:#e39a9a; background:rgba(251,113,133,.08); cursor:pointer; }.empty { padding:38px; color:var(--muted); text-align:center; }
.measurements-card { padding:24px; }.measurements-form { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:end; }.measurements-form label { display:grid; gap:7px; color:#bcc6c2; font-size:14px; font-weight:700; }.measurements-form input { width:100%; min-height:44px; padding:9px 11px; border:1px solid var(--border); border-radius:10px; color:white; background:#101516; }.measurements-form button { grid-column:1/-1; min-height:45px; border:0; border-radius:11px; color:var(--fp-text-inverse); background:linear-gradient(135deg,#e0a940,#6e9fc2); font-weight:800; cursor:pointer; }.measurement-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }.measurement-stat { padding:15px; border:1px solid rgba(255,255,255,.07); border-radius:12px; background:rgba(255,255,255,.035); }.measurement-stat span { display:block; color:var(--muted); font-size:13px; }.measurement-stat strong { display:block; margin-top:6px; font-size:21px; }.measurement-stat small { display:block; margin-top:4px; color:#8e9d99; }.measurement-history { display:grid; gap:9px; }.measurement-row { display:grid; grid-template-columns:130px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border:1px solid rgba(255,255,255,.07); border-radius:12px; }.measurement-values { display:flex; flex-wrap:wrap; gap:8px; }.measurement-values span { padding:6px 9px; border-radius:8px; color:#bcc6c2; background:rgba(255,255,255,.05); font-size:13px; }
.photos-card { padding:24px; margin-top:20px; }.photos-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; align-items:end; }.photos-form label,.comparison-controls label { display:grid; gap:7px; color:#bcc6c2; font-size:14px; font-weight:700; }.photos-form input,.comparison-controls select { width:100%; min-height:44px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; color:white; background:#101516; }.photos-form button { grid-column:1/-1; min-height:45px; border:0; border-radius:11px; color:var(--fp-text-inverse); background:linear-gradient(135deg,#db2777,#e0a940); font-weight:800; cursor:pointer; }.photos-form button:disabled { opacity:.65; cursor:wait; }.comparison-controls { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 16px; }.photo-comparison { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }.comparison-column { padding:14px; border:1px solid rgba(255,255,255,.08); border-radius:14px; }.comparison-column h3 { margin:0 0 12px; }.comparison-images,.photo-set-images { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.photo-frame { aspect-ratio:3/4; overflow:hidden; border-radius:10px; background:#101516; }.photo-frame img { width:100%; height:100%; object-fit:cover; }.photo-frame span { display:block; padding:9px; color:var(--muted); text-align:center; }.photo-gallery { display:grid; gap:14px; }.photo-set { padding:16px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(255,255,255,.025); }.photo-set-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }.photo-set-header h3 { margin:0; }
@media(max-width:900px){.measurements-form{grid-template-columns:repeat(2,1fr)}.measurement-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.progress-page{width:calc(100% - 20px);padding-top:20px}.entry-card form,.stats-grid,.measurements-form,.measurement-summary,.photos-form,.comparison-controls,.photo-comparison{grid-template-columns:1fr}.chart-card,.history-card,.measurements-card,.photos-card{padding:16px}.history-row{grid-template-columns:1fr auto auto}.measurement-row{grid-template-columns:1fr auto}.measurement-values{grid-column:1/-1}.comparison-images,.photo-set-images{grid-template-columns:repeat(3,minmax(90px,1fr));overflow-x:auto}}