<\/title>\n<style>\n :root {\n --primary: #F0605C;\n --primary-dark: #d94945;\n --primary-light: #ff8a87;\n --primary-bg: #fff5f5;\n --accent: #ff9e9b;\n --text: #2d2d2d;\n --text-muted: #7a7a7a;\n --card-bg: #ffffff;\n --border: #ecdede;\n --bg: #f7f2f2;\n --success: #48c78e;\n --info: #3273dc;\n --gradient: linear-gradient(135deg, #F0605C 0%, #ff8a87 100%);\n --font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n }\n\n * { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n font-family: var(--font);\n background: var(--bg);\n color: var(--text);\n min-height: 100vh;\n }\n\n \/* Header *\/\n .header { text-align: center; margin-bottom: 28px; }\n .header-icon {\n width: 60px; height: 60px;\n background: var(--gradient);\n border-radius: 18px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 10px;\n }\n .header-icon svg { width: 32px; height: 32px; fill: white; }\n .header h1 { font-size: 1.6rem; font-weight: 800; color: var(--text); letter-spacing: -0.4px; }\n .header p { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }\n\n \/* Two-column layout \u2014 single col on mobile, side-by-side on PC *\/\n .layout { display: block; }\n @media (min-width: 820px) {\n .layout {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n align-items: start;\n }\n .col-right {\n position: sticky;\n top: 20px;\n }\n }\n\n \/* Cards \u2014 no shadow *\/\n .card {\n background: var(--card-bg);\n border-radius: 14px;\n padding: 18px 16px;\n margin-bottom: 12px;\n border: 1px solid var(--border);\n }\n .card-title {\n font-weight: 700;\n font-size: 0.95rem;\n color: var(--text);\n margin-bottom: 4px;\n display: flex;\n align-items: center;\n gap: 7px;\n }\n .card-title .dot { width: 9px; height: 9px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }\n .card-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 14px; margin-left: 16px; }\n\n \/* Section label *\/\n .section-label {\n font-weight: 700;\n font-size: 0.72rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: var(--primary);\n margin: 20px 0 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .section-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n \/* Gender *\/\n .gender-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n .gender-btn {\n border: 2px solid var(--border);\n background: #fff;\n border-radius: 12px;\n padding: 14px 8px;\n cursor: pointer;\n text-align: center;\n transition: all 0.18s;\n font-family: var(--font);\n font-weight: 600;\n font-size: 0.88rem;\n color: var(--text-muted);\n }\n .gender-btn svg { width: 32px; height: 32px; display: block; margin: 0 auto 5px; }\n .gender-btn.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }\n .gender-btn:hover:not(.active) { border-color: var(--accent); }\n\n \/* Sliders *\/\n .field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }\n .field-row:last-child { margin-bottom: 0; }\n .field-label { font-size: 0.82rem; color: var(--text-muted); width: 56px; flex-shrink: 0; }\n .field-value { font-weight: 800; font-size: 1.15rem; color: var(--primary); width: 48px; text-align: right; flex-shrink: 0; }\n .field-unit { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; width: 26px; }\n\n input[type=range] {\n -webkit-appearance: none;\n flex: 1;\n height: 5px;\n border-radius: 5px;\n background: #f0e0e0;\n outline: none;\n cursor: pointer;\n }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--primary);\n border: 3px solid white;\n box-shadow: 0 1px 4px rgba(240,96,92,0.35);\n cursor: pointer;\n transition: transform 0.1s;\n }\n input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }\n input[type=range]::-moz-range-thumb {\n width: 20px; height: 20px;\n border-radius: 50%;\n background: var(--primary);\n border: 3px solid white;\n cursor: pointer;\n }\n\n \/* Unit toggle *\/\n .unit-toggle { display: inline-flex; background: #f5eded; border-radius: 9px; padding: 3px; gap: 2px; margin-left: auto; }\n .unit-btn {\n padding: 3px 10px;\n border-radius: 6px;\n border: none;\n background: transparent;\n font-size: 0.74rem;\n font-weight: 700;\n color: var(--text-muted);\n cursor: pointer;\n font-family: var(--font);\n transition: all 0.13s;\n }\n .unit-btn.active { background: var(--primary); color: white; }\n\n \/* Height imperial *\/\n .height-imperial { display: flex; gap: 10px; }\n .height-imperial .sub-field { flex: 1; }\n .height-imperial label { font-size: 0.74rem; color: var(--text-muted); display: block; margin-bottom: 4px; }\n .height-imperial input[type=number] {\n width: 100%;\n border: 2px solid var(--border);\n border-radius: 9px;\n padding: 7px 8px;\n font-size: 0.95rem;\n font-family: var(--font);\n font-weight: 700;\n color: var(--text);\n outline: none;\n text-align: center;\n transition: border-color 0.18s;\n }\n .height-imperial input[type=number]:focus { border-color: var(--primary); }\n\n \/* Activity \/ Climate tri-group *\/\n .tri-group { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }\n .tri-btn {\n border: 2px solid var(--border);\n background: #fff;\n border-radius: 11px;\n padding: 9px 5px;\n cursor: pointer;\n text-align: center;\n font-family: var(--font);\n font-weight: 600;\n font-size: 0.73rem;\n color: var(--text-muted);\n transition: all 0.18s;\n line-height: 1.3;\n }\n .tri-btn .icon { font-size: 1.45rem; display: block; margin-bottom: 3px; }\n .tri-btn.active { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }\n .tri-btn:hover:not(.active) { border-color: var(--accent); }\n\n \/* Beverages *\/\n .bev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n @media (min-width: 480px) and (max-width: 819px) { .bev-grid { grid-template-columns: repeat(4, 1fr); } }\n @media (min-width: 820px) { .bev-grid { grid-template-columns: 1fr 1fr; } }\n @media (min-width: 980px) { .bev-grid { grid-template-columns: repeat(4, 1fr); } }\n\n .bev-item {\n border: 2px solid var(--border);\n border-radius: 12px;\n padding: 10px 6px;\n text-align: center;\n background: #fff;\n transition: all 0.18s;\n }\n .bev-item.has-value { border-color: var(--primary); background: var(--primary-bg); }\n .bev-emoji { font-size: 1.6rem; line-height: 1; margin-bottom: 4px; }\n .bev-name { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; margin-bottom: 7px; }\n .bev-control { display: flex; align-items: center; justify-content: center; gap: 7px; }\n .bev-btn {\n width: 26px; height: 26px;\n border-radius: 50%;\n border: none;\n background: var(--primary);\n color: white;\n font-size: 1rem;\n font-weight: 700;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.13s, transform 0.1s;\n line-height: 1;\n }\n .bev-btn:hover { background: var(--primary-dark); transform: scale(1.1); }\n .bev-btn.minus { background: #eee; color: #999; }\n .bev-btn.minus:hover { background: #ddd; }\n .bev-count { font-weight: 800; font-size: 0.95rem; color: var(--text); width: 18px; text-align: center; }\n\n .bev-total-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px 0 0;\n border-top: 1px dashed var(--border);\n margin-top: 10px;\n font-size: 0.82rem;\n color: var(--text-muted);\n }\n .bev-total-row strong { color: var(--primary); font-size: 0.95rem; }\n\n \/* Result card *\/\n .result-card {\n background: var(--gradient);\n border-radius: 18px;\n padding: 24px 20px;\n margin-bottom: 12px;\n color: white;\n text-align: center;\n position: relative;\n overflow: hidden;\n }\n .result-card::before { content:''; position:absolute; top:-35px; right:-35px; width:140px; height:140px; background:rgba(255,255,255,0.07); border-radius:50%; }\n .result-card::after { content:''; position:absolute; bottom:-45px; left:-25px; width:120px; height:120px; background:rgba(255,255,255,0.05); border-radius:50%; }\n .result-label { font-size: 0.82rem; font-weight: 600; opacity: 0.85; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 5px; }\n .result-main { font-size: 3.6rem; font-weight: 900; line-height: 1; letter-spacing: -2px; }\n .result-unit { font-size: 1.1rem; font-weight: 700; opacity: 0.8; margin-left: 3px; }\n .result-sub { font-size: 0.82rem; opacity: 0.8; margin-top: 5px; }\n .result-badges { display: flex; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; position: relative; z-index: 1; }\n .badge { background: rgba(255,255,255,0.18); border-radius: 20px; padding: 5px 12px; font-size: 0.74rem; font-weight: 700; }\n\n \/* Breakdown *\/\n .breakdown { border-radius: 13px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 12px; }\n .breakdown-title { background: var(--primary-bg); padding: 10px 14px; font-weight: 700; font-size: 0.86rem; color: var(--primary); border-bottom: 1px solid var(--border); }\n .breakdown table { width: 100%; border-collapse: collapse; background: white; }\n .breakdown th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 700; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }\n .breakdown td { padding: 9px 12px; font-size: 0.84rem; border-bottom: 1px solid #faf0f0; color: var(--text); }\n .breakdown tr:last-child td { border-bottom: none; }\n .breakdown td:last-child, .breakdown th:last-child { text-align: right; }\n .val-positive { color: var(--success); font-weight: 700; }\n .val-negative { color: var(--primary); font-weight: 700; }\n .val-neutral { color: var(--info); font-weight: 700; }\n\n \/* Progress *\/\n .progress-wrap { margin-top: 14px; }\n .progress-label { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-bottom: 5px; }\n .progress-label strong { color: var(--primary); }\n .progress-bar { height: 9px; background: #f0e0e0; border-radius: 9px; overflow: hidden; }\n .progress-fill { height: 100%; background: var(--gradient); border-radius: 9px; transition: width 0.4s cubic-bezier(.4,2,.6,1); min-width: 3px; }\n\n \/* Reference tables *\/\n .ref-card { background: white; border-radius: 13px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 12px; }\n .ref-header { background: var(--gradient); padding: 12px 16px; color: white; font-weight: 700; font-size: 0.9rem; }\n .ref-sub { font-size: 0.72rem; opacity: 0.8; font-weight: 400; }\n .ref-table { width: 100%; border-collapse: collapse; }\n .ref-table th { background: #fff8f8; padding: 8px 12px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--primary); font-weight: 700; border-bottom: 1px solid var(--border); text-align: left; }\n .ref-table td { padding: 8px 12px; font-size: 0.8rem; border-bottom: 1px solid #fdf5f5; color: var(--text); }\n .ref-table tr:last-child td { border-bottom: none; }\n .ref-table td:not(:first-child) { text-align: center; }\n .ref-table th:not(:first-child) { text-align: center; }\n .highlight-row td { background: #fff8f8; font-weight: 700; color: var(--primary-dark); }\n\n \/* Tips *\/\n .tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n @media (max-width: 420px) { .tips-grid { grid-template-columns: 1fr; } }\n .tip { background: var(--primary-bg); border-radius: 11px; padding: 11px 12px; font-size: 0.78rem; line-height: 1.45; color: var(--text); border-left: 3px solid var(--primary); }\n .tip strong { color: var(--primary); display: block; margin-bottom: 2px; font-size: 0.75rem; }\n\n .footer-note { text-align: center; font-size: 0.7rem; color: #bbb; margin-top: 24px; line-height: 1.5; }\n<\/style>\n<\/head>\n<body>\n<div class=\"page\">\n\n <div class=\"layout\">\n\n \n <div class=\"col-left\">\n\n <div class=\"section-label\">About You<\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> Gender<\/div>\n <div class=\"card-subtitle\">Affects baseline hydration needs<\/div>\n <div class=\"gender-group\">\n <button class=\"gender-btn active\" id=\"btn-male\" onclick=\"setGender('male')\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <circle cx=\"10.5\" cy=\"10.5\" r=\"5.5\"\/><line x1=\"14.5\" y1=\"6.5\" x2=\"20\" y2=\"1\"\/><line x1=\"16\" y1=\"1\" x2=\"20\" y2=\"1\"\/><line x1=\"20\" y1=\"1\" x2=\"20\" y2=\"5\"\/>\n <\/svg>\n M\u0119\u017cczyzna\n <\/button>\n <button class=\"gender-btn\" id=\"btn-female\" onclick=\"setGender('female')\">\n <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n <circle cx=\"12\" cy=\"9\" r=\"5.5\"\/><line x1=\"12\" y1=\"14.5\" x2=\"12\" y2=\"22\"\/><line x1=\"9\" y1=\"19\" x2=\"15\" y2=\"19\"\/>\n <\/svg>\n Kobieta\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> Wiek<\/div>\n <div class=\"field-row\" style=\"margin-top:8px\">\n <span class=\"field-label\">Wiek<\/span>\n <input type=\"range\" id=\"age-slider\" min=\"5\" max=\"90\" value=\"25\" oninput=\"updateAge()\">\n <span class=\"field-value\" id=\"age-val\">25<\/span>\n <span class=\"field-unit\">yrs<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\">\n <span class=\"dot\"><\/span> Waga\n <div class=\"unit-toggle\">\n <button class=\"unit-btn active\" id=\"wt-kg\" onclick=\"setWeightUnit('kg')\">kg<\/button>\n <button class=\"unit-btn\" id=\"wt-lbs\" onclick=\"setWeightUnit('lbs')\">funty<\/button>\n <\/div>\n <\/div>\n <div class=\"field-row\" style=\"margin-top:8px\">\n <span class=\"field-label\">Waga<\/span>\n <input type=\"range\" id=\"weight-slider\" min=\"30\" max=\"200\" value=\"70\" oninput=\"updateWeight()\">\n <span class=\"field-value\" id=\"weight-val\">70<\/span>\n <span class=\"field-unit\" id=\"weight-unit-label\">kg<\/span>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\">\n <span class=\"dot\"><\/span> Wysoko\u015b\u0107\n <div class=\"unit-toggle\">\n <button class=\"unit-btn active\" id=\"ht-cm\" onclick=\"setHeightUnit('cm')\">cm<\/button>\n <button class=\"unit-btn\" id=\"ht-imp\" onclick=\"setHeightUnit('imperial')\">ft\/in<\/button>\n <\/div>\n <\/div>\n <div id=\"height-cm-wrap\" style=\"margin-top:8px\">\n <div class=\"field-row\">\n <span class=\"field-label\">Wysoko\u015b\u0107<\/span>\n <input type=\"range\" id=\"height-slider\" min=\"100\" max=\"220\" value=\"170\" oninput=\"updateHeight()\">\n <span class=\"field-value\" id=\"height-val\">170<\/span>\n <span class=\"field-unit\">cm<\/span>\n <\/div>\n <\/div>\n <div id=\"height-imp-wrap\" style=\"display:none;margin-top:8px\">\n <div class=\"height-imperial\">\n <div class=\"sub-field\"><label>Feet<\/label><input type=\"number\" id=\"height-ft\" min=\"3\" max=\"8\" value=\"5\" oninput=\"updateHeightImperial()\"><\/div>\n <div class=\"sub-field\"><label>Inches<\/label><input type=\"number\" id=\"height-in\" min=\"0\" max=\"11\" value=\"7\" oninput=\"updateHeightImperial()\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> Poziom aktywno\u015bci<\/div>\n <div class=\"card-subtitle\">Daily physical activity<\/div>\n <div class=\"tri-group\">\n <button class=\"tri-btn\" id=\"act-low\" onclick=\"setActivity('low')\"><span class=\"icon\">\ud83d\udecb\ufe0f<\/span>Sedentary<\/button>\n <button class=\"tri-btn active\" id=\"act-mod\" onclick=\"setActivity('moderate')\"><span class=\"icon\">\ud83d\udeb6<\/span>Moderate<\/button>\n <button class=\"tri-btn\" id=\"act-high\" onclick=\"setActivity('high')\"><span class=\"icon\">\ud83c\udfcb\ufe0f<\/span>Active<\/button>\n <\/div>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-title\"><span class=\"dot\"><\/span> Climate<\/div>\n <div class=\"card-subtitle\">Environment you spend most time in<\/div>\n <div class=\"tri-group\">\n <button class=\"tri-btn active\" id=\"cl-temp\" onclick=\"setClimate('temperate')\"><span class=\"icon\">\ud83c\udf24\ufe0f<\/span>Temperate<\/button>\n <button class=\"tri-btn\" id=\"cl-hot\" onclick=\"setClimate('hot')\"><span class=\"icon\">\u2600\ufe0f<\/span>Hot\/Humid<\/button>\n <button class=\"tri-btn\" id=\"cl-cold\" onclick=\"setClimate('cold')\"><span class=\"icon\">\u2744\ufe0f<\/span>Cold<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n\n \n <div class=\"col-right\">\n\n <div class=\"section-label\">Your Results<\/div>\n\n <div class=\"result-card\">\n <div class=\"result-label\">\ud83d\udca7 Recommended Daily Water Intake<\/div>\n <div>\n <span class=\"result-main\" id=\"result-liters\">2.5<\/span>\n <span class=\"result-unit\">L<\/span>\n <\/div>\n <div class=\"result-sub\" id=\"result-cups\">\u2248 10 cups (250 ml each)<\/div>\n <div class=\"result-badges\">\n <span class=\"badge\" id=\"badge-gender\">\ud83d\udc68 Male<\/span>\n <span class=\"badge\" id=\"badge-activity\">\ud83d\udeb6 Moderate<\/span>\n <span class=\"badge\" id=\"badge-climate\">\ud83c\udf24\ufe0f Temperate<\/span>\n <\/div>\n <\/div>\n\n <div class=\"section-label\">Reference Guide<\/div>\n\n <div class=\"ref-card\">\n <div class=\"ref-header\">\n \ud83d\udccb Daily Water Needs by Profile\n <div class=\"ref-sub\">Based on Institute of Medicine & WHO guidelines<\/div>\n <\/div>\n <div style=\"overflow-x:auto\">\n <table class=\"ref-table\">\n <thead><tr><th>Profile<\/th><th>Min (L)<\/th><th>Ideal (L)<\/th><th>Max (L)<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>Child (5\u201312 yrs)<\/td><td>1.2<\/td><td>1.5<\/td><td>1.8<\/td><\/tr>\n <tr><td>Teen (13\u201318 yrs)<\/td><td>1.5<\/td><td>1.9<\/td><td>2.4<\/td><\/tr>\n <tr><td>Adult Female (sedentary)<\/td><td>1.6<\/td><td>2.0<\/td><td>2.5<\/td><\/tr>\n <tr><td>Adult Male (sedentary)<\/td><td>1.8<\/td><td>2.5<\/td><td>3.0<\/td><\/tr>\n <tr class=\"highlight-row\"><td>Adult Female (active)<\/td><td>2.0<\/td><td>2.7<\/td><td>3.2<\/td><\/tr>\n <tr class=\"highlight-row\"><td>Adult Male (active)<\/td><td>2.5<\/td><td>3.2<\/td><td>4.0<\/td><\/tr>\n <tr><td>Pregnant women<\/td><td>2.3<\/td><td>3.0<\/td><td>3.5<\/td><\/tr>\n <tr><td>Breastfeeding women<\/td><td>2.6<\/td><td>3.5<\/td><td>4.0<\/td><\/tr>\n <tr><td>Elderly (65+)<\/td><td>1.5<\/td><td>1.9<\/td><td>2.4<\/td><\/tr>\n <tr><td>Hot climate (+add)<\/td><td>+0.5<\/td><td>+0.8<\/td><td>+1.2<\/td><\/tr>\n <tr><td>Intense exercise (+add)<\/td><td>+0.5<\/td><td>+1.0<\/td><td>+1.5<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <div class=\"ref-card\">\n <div class=\"ref-header\">\n \ud83c\udf75 Beverage Hydration Values\n <div class=\"ref-sub\">Net water contribution per serving<\/div>\n <\/div>\n <div style=\"overflow-x:auto\">\n <table class=\"ref-table\">\n <thead><tr><th>Beverage<\/th><th>Serving<\/th><th>Net H\u2082O<\/th><th>Note<\/th><\/tr><\/thead>\n <tbody>\n <tr><td>\ud83d\udca7 Water<\/td><td>250 ml<\/td><td>250 ml<\/td><td>Best choice<\/td><\/tr>\n <tr><td>\ud83e\uded6 Tea (no sugar)<\/td><td>250 ml<\/td><td>240 ml<\/td><td>Mild diuretic<\/td><\/tr>\n <tr><td>\u2615 Coffee<\/td><td>125 ml<\/td><td>100 ml<\/td><td>Mild diuretic<\/td><\/tr>\n <tr><td>\ud83e\udd5b Milk<\/td><td>250 ml<\/td><td>220 ml<\/td><td>Nutritious<\/td><\/tr>\n <tr><td>\ud83c\udf4a Fruit Juice<\/td><td>250 ml<\/td><td>220 ml<\/td><td>High sugar<\/td><\/tr>\n <tr><td>\ud83e\udd64 Soft Drink<\/td><td>330 ml<\/td><td>280 ml<\/td><td>High sugar<\/td><\/tr>\n <tr><td>\ud83c\udf77 Wine<\/td><td>125 ml<\/td><td>50 ml<\/td><td>Diuretic<\/td><\/tr>\n <tr><td>\ud83c\udf7a Beer<\/td><td>330 ml<\/td><td>220 ml<\/td><td>Mild diuretic<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/div>\n\n<script>\n const state = {\n gender: 'male', age: 25, weightKg: 70, weightUnit: 'kg',\n heightCm: 170, heightUnit: 'cm', activity: 'moderate',\n climate: 'temperate', beverages: {}\n };\n\n const BEVERAGES = [\n { id: 'water', name: 'Water', emoji: '\ud83d\udca7', serving: 250, factor: 1.00 },\n { id: 'tea', name: 'Tea', emoji: '\ud83e\uded6', serving: 250, factor: 0.96 },\n { id: 'coffee', name: 'Coffee', emoji: '\u2615', serving: 125, factor: 0.80 },\n { id: 'milk', name: 'Milk', emoji: '\ud83e\udd5b', serving: 250, factor: 0.88 },\n { id: 'juice', name: 'Fruit Juice', emoji: '\ud83c\udf4a', serving: 250, factor: 0.88 },\n { id: 'soda', name: 'Soft Drink', emoji: '\ud83e\udd64', serving: 330, factor: 0.85 },\n { id: 'wine', name: 'Wine', emoji: '\ud83c\udf77', serving: 125, factor: 0.40 },\n { id: 'beer', name: 'Beer', emoji: '\ud83c\udf7a', serving: 330, factor: 0.67 },\n ];\n BEVERAGES.forEach(b => state.beverages[b.id] = 0);\n\n function buildBeverageGrid() {\n const grid = document.getElementById('bev-grid');\n grid.innerHTML = '';\n BEVERAGES.forEach(b => {\n const div = document.createElement('div');\n div.className = 'bev-item';\n div.id = 'bev-' + b.id;\n div.innerHTML = `\n <div class=\"bev-emoji\">${b.emoji}<\/div>\n <div class=\"bev-name\">${b.name}<br><span style=\"color:#bbb;font-weight:400\">(${b.serving}ml)<\/span><\/div>\n <div class=\"bev-control\">\n <button class=\"bev-btn minus\" onclick=\"changeBev('${b.id}',-1)\">\u2212<\/button>\n <span class=\"bev-count\" id=\"cnt-${b.id}\">0<\/span>\n <button class=\"bev-btn\" onclick=\"changeBev('${b.id}',1)\">+<\/button>\n <\/div>`;\n grid.appendChild(div);\n });\n }\n\n function changeBev(id, delta) {\n state.beverages[id] = Math.max(0, (state.beverages[id]||0) + delta);\n document.getElementById('cnt-'+id).textContent = state.beverages[id];\n document.getElementById('bev-'+id).classList.toggle('has-value', state.beverages[id] > 0);\n calculate();\n }\n\n function setGender(g) {\n state.gender = g;\n document.getElementById('btn-male').classList.toggle('active', g==='male');\n document.getElementById('btn-female').classList.toggle('active', g==='female');\n calculate();\n }\n\n function updateAge() {\n state.age = parseInt(document.getElementById('age-slider').value);\n document.getElementById('age-val').textContent = state.age;\n calculate();\n }\n\n function setWeightUnit(unit) {\n state.weightUnit = unit;\n const slider = document.getElementById('weight-slider');\n document.getElementById('wt-kg').classList.toggle('active', unit==='kg');\n document.getElementById('wt-lbs').classList.toggle('active', unit==='lbs');\n document.getElementById('weight-unit-label').textContent = unit;\n if (unit === 'lbs') {\n slider.min = 66; slider.max = 440;\n const lbs = Math.round(state.weightKg * 2.205);\n slider.value = lbs;\n document.getElementById('weight-val').textContent = lbs;\n } else {\n slider.min = 30; slider.max = 200;\n slider.value = state.weightKg;\n document.getElementById('weight-val').textContent = state.weightKg;\n }\n }\n\n function updateWeight() {\n const val = parseInt(document.getElementById('weight-slider').value);\n document.getElementById('weight-val').textContent = val;\n state.weightKg = state.weightUnit === 'lbs' ? Math.round(val\/2.205) : val;\n calculate();\n }\n\n function setHeightUnit(unit) {\n state.heightUnit = unit;\n document.getElementById('ht-cm').classList.toggle('active', unit==='cm');\n document.getElementById('ht-imp').classList.toggle('active', unit==='imperial');\n document.getElementById('height-cm-wrap').style.display = unit==='cm' ? '' : 'none';\n document.getElementById('height-imp-wrap').style.display = unit==='imperial' ? '' : 'none';\n if (unit === 'imperial') {\n const totalIn = Math.round(state.heightCm \/ 2.54);\n document.getElementById('height-ft').value = Math.floor(totalIn\/12);\n document.getElementById('height-in').value = totalIn % 12;\n }\n }\n\n function updateHeight() {\n state.heightCm = parseInt(document.getElementById('height-slider').value);\n document.getElementById('height-val').textContent = state.heightCm;\n calculate();\n }\n\n function updateHeightImperial() {\n const ft = parseInt(document.getElementById('height-ft').value)||0;\n const inch = parseInt(document.getElementById('height-in').value)||0;\n state.heightCm = Math.round((ft*12+inch)*2.54);\n calculate();\n }\n\n function setActivity(a) {\n state.activity = a;\n ['low','mod','high'].forEach(l => document.getElementById('act-'+l).classList.remove('active'));\n document.getElementById({low:'act-low',moderate:'act-mod',high:'act-high'}[a]).classList.add('active');\n calculate();\n }\n\n function setClimate(c) {\n state.climate = c;\n ['temp','hot','cold'].forEach(l => document.getElementById('cl-'+l).classList.remove('active'));\n document.getElementById({temperate:'cl-temp',hot:'cl-hot',cold:'cl-cold'}[c]).classList.add('active');\n calculate();\n }\n\n function calculate() {\n let base = state.weightKg * 35;\n if (state.age < 13) base *= 0.75;\n else if (state.age < 19) base *= 0.88;\n else if (state.age > 65) base *= 0.85;\n if (state.gender === 'female') base *= 0.88;\n base *= {low:1.0, moderate:1.15, high:1.35}[state.activity];\n base += {temperate:0, hot:400, cold:-100}[state.climate];\n base = Math.max(1000, base);\n\n const fromFood = base * 0.20;\n const fromDrinksNeeded = base - fromFood;\n\n let loggedMl = 0;\n BEVERAGES.forEach(b => { loggedMl += (state.beverages[b.id]||0) * b.serving * b.factor; });\n const remaining = Math.max(0, fromDrinksNeeded - loggedMl);\n\n const fmt = v => (v\/1000).toFixed(1)+' L';\n document.getElementById('result-liters').textContent = (base\/1000).toFixed(1);\n document.getElementById('result-cups').textContent = `\u2248 ${Math.round(fromDrinksNeeded\/250)} cups (250 ml each)`;\n document.getElementById('bd-total').textContent = fmt(base);\n document.getElementById('bd-food').textContent = fmt(fromFood);\n document.getElementById('bd-drinks').textContent = fmt(fromDrinksNeeded);\n document.getElementById('bd-logged').textContent = fmt(loggedMl);\n document.getElementById('bd-remaining').textContent = fmt(remaining);\n\n document.getElementById('badge-gender').textContent = state.gender==='male' ? '\ud83d\udc68 Male' : '\ud83d\udc69 Female';\n document.getElementById('badge-activity').textContent = {low:'\ud83d\udecb\ufe0f Sedentary',moderate:'\ud83d\udeb6 Moderate',high:'\ud83c\udfcb\ufe0f Active'}[state.activity];\n document.getElementById('badge-climate').textContent = {temperate:'\ud83c\udf24\ufe0f Temperate',hot:'\u2600\ufe0f Hot',cold:'\u2744\ufe0f Cold'}[state.climate];\n\n const pct = Math.min(100, Math.round((loggedMl\/fromDrinksNeeded)*100));\n document.getElementById('progress-fill').style.width = pct+'%';\n document.getElementById('prog-logged').textContent = Math.round(loggedMl)+' ml';\n document.getElementById('prog-goal').textContent = Math.round(fromDrinksNeeded)+' ml';\n document.getElementById('prog-pct').textContent = pct+'% of daily goal';\n document.getElementById('prog-remaining').textContent = Math.round(remaining)+' ml remaining';\n\n const rawMl = BEVERAGES.reduce((s,b)=>s+(state.beverages[b.id]||0)*b.serving,0);\n document.getElementById('bev-total-display').textContent =\n rawMl>=1000 ? (rawMl\/1000).toFixed(2)+' L' : Math.round(rawMl)+' ml';\n }\n\n buildBeverageGrid();\n calculate();\n<\/script>\n<\/body>\n<\/html>\n\t\t<\/div>\n\t<\/div>\n\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>\n\t\t<div id=\"fws_69e0787516c27\" data-column-margin=\"default\" data-midnight=\"dark\" class=\"wpb_row vc_row-fluid vc_row\" style=\"padding-top: 0px; padding-bottom: 0px; \"><div class=\"row-bg-wrap\" data-bg-animation=\"none\" data-bg-animation-delay=\"\" data-bg-overlay=\"false\"><div class=\"inner-wrap row-bg-layer\" ><div class=\"row-bg viewport-desktop\" style=\"\"><\/div><\/div><\/div><div class=\"row_col_wrap_12 col span_12 dark left\">\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"nectar-split-heading\" data-align=\"default\" data-m-align=\"inherit\" data-text-effect=\"default\" data-animation-type=\"line-reveal-by-space\" data-animation-delay=\"0\" data-animation-offset=\"\" data-m-rm-animation=\"\" data-stagger=\"\" data-custom-font-size=\"false\" ><h1 >Like Duolingo but for Wellness<\/h1><\/div>\n<div class=\"wpb_text_column wpb_content_element\" >\n\t<div class=\"wpb_wrapper\">\n\t\t<p>Fito is a workout, food and water tracking app, like <a href=\"https:\/\/www.duolingo.com\/\" rel=\"noopener\">Duolingo<\/a> but for wellness. And it has a cute little bear that accompanies you on your fitness journey in the <a href=\"https:\/\/getfitoapp.com\/pl\/tools\/fitness-streak-widgets-and-watch-faces\/\">wid\u017cety ekranu g\u0142\u00f3wnego<\/a>daj\u0105c swojej d\u0142ugoterminowej podr\u00f3\u017cy zdrowotnej zastrzyk motywacji.<\/p>\n\t<\/div>\n<\/div>\n\n\n\n<div class=\"nectar-cta text_hover_color_FFFFFF alignment_tablet_default alignment_phone_default display_tablet_inherit display_phone_inherit\" data-color=\"accent-color\" data-using-bg=\"true\" data-style=\"basic\" data-display=\"block\" data-alignment=\"left\" data-text-color=\"custom\" ><h3 style=\"color: #FFFFFF;\"><span class=\"link_wrap\" style=\"padding-top: 15px; padding-right: 30px; padding-bottom: 15px; padding-left: 30px;\"><a class=\"link_text\" role=\"button\" href=\"https:\/\/getfitoapp.com\/pl\/\"><span class=\"text\">Wypr\u00f3buj teraz<\/span><\/a><\/span><\/h3><\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n\n\t<div class=\"vc_col-sm-6 wpb_column column_container vc_column_container col no-extra-padding inherit_tablet inherit_phone\" data-padding-pos=\"all\" data-has-bg-color=\"false\" data-bg-color=\"\" data-bg-opacity=\"1\" data-animation=\"\" data-delay=\"0\" >\n\t\t<div class=\"vc_column-inner\" >\n\t\t\t<div class=\"wpb_wrapper\">\n\t\t\t\t<div class=\"img-with-aniamtion-wrap\" data-max-width=\"100%\" data-max-width-mobile=\"default\" data-shadow=\"none\" data-animation=\"none\" >\n <div class=\"inner\">\n <div class=\"hover-wrap\"> \n <div class=\"hover-wrap-inner\">\n <img loading=\"lazy\" decoding=\"async\" class=\"img-with-animation skip-lazy\" data-delay=\"0\" height=\"1136\" width=\"2177\" data-animation=\"none\" src=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets.png\" alt=\"Kolekcja 8 grywalizowanych wid\u017cet\u00f3w najlepszych aplikacji do nawadniania przedstawiaj\u0105cych urocz\u0105 posta\u0107 czerwonego misia w r\u00f3\u017cnych pozach z butelkami wody i szklankami, wy\u015bwietlaj\u0105cych motywacyjne has\u0142a, takie jak "Stay Hydrated" i "Water Checkpoint" z pier\u015bcieniami post\u0119pu.\" srcset=\"https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets.png 2177w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-300x157.png 300w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-1024x534.png 1024w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-768x401.png 768w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-1536x802.png 1536w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-2048x1069.png 2048w, https:\/\/getfitoapp.com\/wp-content\/uploads\/2026\/02\/hydration-widgets-18x9.png 18w\" sizes=\"auto, (max-width: 2177px) 100vw, 2177px\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\t\t\t<\/div> \n\t\t<\/div>\n\t<\/div> \n<\/div><\/div>","protected":false},"excerpt":{"rendered":"Daily Water Intake Calculator How Much Water Do You Need to Drink Each Day? About You Gender Affects baseline hydration needs Male Female Age Age 25 yrs Weight kg lbs...","protected":false},"author":1,"featured_media":0,"parent":6528,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"tags":[39],"class_list":{"0":"post-6701","1":"page","2":"type-page","3":"status-publish","5":"tag-tools"},"_links":{"self":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages\/6701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/comments?post=6701"}],"version-history":[{"count":0,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages\/6701\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/pages\/6528"}],"wp:attachment":[{"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/media?parent=6701"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getfitoapp.com\/pl\/wp-json\/wp\/v2\/tags?post=6701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}