:root{
  --bg:#eef8f7;--surface:#fff;--text:#102725;--muted:#637a77;--line:#d7e9e6;
  --brand:#139f91;--brand2:#32c7b3;--navy:#0c3738;--soft:#eaf9f6;--warn:#fff6df;
  --danger:#fff0eb;--shadow:0 26px 70px rgba(16,39,37,.10)
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:
radial-gradient(circle at 90% 5%,rgba(50,199,179,.18),transparent 25%),linear-gradient(180deg,#eff9f6,#f8fbfa)}
button,input{font:inherit}
button{cursor:pointer}
.shell{width:min(1050px,calc(100% - 24px));margin:auto;padding:20px 0 45px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.brand{display:flex;gap:12px;align-items:center}.logo{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:white;font-size:22px;font-weight:900}
.brand strong,.brand small{display:block}.brand strong{font-size:22px}.brand small{color:var(--muted);margin-top:3px}
.beta{background:#0f2725;color:#fff;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900}
.card{background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:30px;padding:28px}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center}
.eyebrow{display:inline-block;color:var(--brand);text-transform:uppercase;letter-spacing:.11em;font-size:11px;font-weight:900;margin-bottom:9px}
h1{font-size:clamp(42px,6vw,68px);line-height:.98;letter-spacing:-.055em;margin:0 0 16px}
h2{font-size:38px;line-height:1.06;letter-spacing:-.04em;margin:0 0 12px}
.lead,.hint{color:var(--muted);line-height:1.65}.lead{font-size:17px}
.hero-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0}
.hero-facts div{padding:15px;border-radius:18px;background:var(--soft);border:1px solid var(--line)}
.hero-facts strong,.hero-facts span{display:block}.hero-facts span{font-size:12px;color:var(--muted);margin-top:4px}
.primary,.secondary{border:0;border-radius:16px;padding:15px 20px;min-height:54px;font-weight:800}
.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;box-shadow:0 14px 30px rgba(19,159,145,.22)}
.secondary{background:#eef5f3;color:var(--text);border:1px solid var(--line)}
.micro{font-size:11px;color:var(--muted)}
.water-preview{text-align:center}.tank{width:220px;height:290px;margin:auto;border:10px solid #d8efeb;border-top-width:14px;border-radius:30px 30px 46px 46px;position:relative;overflow:hidden;background:#f8fffd;box-shadow:inset 0 0 30px rgba(19,159,145,.08)}
.water{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(180deg,#4dd9c6,#169d91);animation:wave 4s ease-in-out infinite}
.water:before{content:"";position:absolute;left:-20%;top:-12px;width:140%;height:25px;border-radius:50%;background:#a3eee3;opacity:.75}
.tank-copy{position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.tank-copy strong{font-size:58px;color:#fff;text-shadow:0 2px 15px rgba(0,0,0,.15)}.tank-copy span{color:#fff;font-weight:800}
.water-preview p{font-size:12px;color:var(--muted)}
@keyframes wave{0%,100%{height:58%}50%{height:64%}}
.progress-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:800}.progress{height:8px;background:#e6efed;border-radius:999px;overflow:hidden;margin:8px 0 28px}.progress i{display:block;width:25%;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand2));transition:.3s}
.step{animation:in .3s ease}@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.field-label{display:block;font-size:13px;font-weight:800;margin:20px 0 9px}.field-label em{font-style:normal;color:var(--muted);font-weight:500}
input{width:100%;min-height:52px;border:1px solid var(--line);border-radius:15px;padding:13px 15px;outline:none;background:#fff}
input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(19,159,145,.08)}
.choices{display:grid;gap:10px}.two{grid-template-columns:repeat(2,1fr)}.three{grid-template-columns:repeat(3,1fr)}.four{grid-template-columns:repeat(4,1fr)}
.choice{border:1px solid var(--line);background:#fff;border-radius:16px;padding:15px;font-weight:750;color:var(--text)}
.choice.selected{border-color:rgba(19,159,145,.45);background:var(--soft);box-shadow:0 0 0 4px rgba(19,159,145,.07)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row>div small{display:block;color:var(--muted);padding:5px 3px}
.unit-input{display:flex;border:1px solid var(--line);border-radius:15px;overflow:hidden}.unit-input input{border:0;border-radius:0}.unit-input span{display:flex;align-items:center;padding:0 16px;background:#f3f7f6;color:var(--muted);font-weight:800}
.food-block{padding:16px;border:1px solid var(--line);background:#fbfdfc;border-radius:18px;margin:12px 0}.food-block strong{display:block;margin-bottom:12px}
.check{display:flex;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;margin:10px 0;background:#fff}.check input{width:20px;height:20px;min-height:auto;flex:none}
.info,.alert,.interpret,.sources-note{padding:16px;border-radius:18px;line-height:1.6}.info{background:var(--soft);border:1px solid var(--line)}.alert{background:var(--danger);border:1px solid #ffd3c7;color:#81372a;margin-bottom:18px}.interpret{background:#f2faf8;border:1px solid var(--line);margin:18px 0}
.error{padding:13px 15px;border-radius:14px;background:var(--danger);color:#8b382c;margin-top:20px;font-weight:700}
.actions{display:flex;gap:10px;margin-top:28px}.actions .secondary{width:32%}.actions .primary{flex:1}
.result{margin-top:20px}.result-hero{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:22px;border-radius:24px;background:linear-gradient(135deg,#0c3738,#12675f);color:#fff}.result-hero .eyebrow{color:#7ce3d3}.result-hero h2{color:#fff}.result-hero p{color:rgba(255,255,255,.75);max-width:580px;line-height:1.6}
.big-water{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#fff 0 58%,transparent 59%),conic-gradient(#39d1bc 0 70%,rgba(255,255,255,.15) 70%);display:flex;align-items:center;justify-content:center;flex-direction:column;flex:none}.big-water strong{font-size:38px;color:#133936}.big-water span{font-size:11px;color:#5d7772;font-weight:800}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.result-grid article{padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff}.result-grid small,.result-grid span{display:block;color:var(--muted)}.result-grid strong{display:block;font-size:23px;margin:7px 0}
.visual-meter{padding:20px;border:1px solid var(--line);border-radius:22px}.meter-head,.meter-labels{display:flex;justify-content:space-between;gap:12px}.meter-head span,.meter-labels{font-size:11px;color:var(--muted)}.meter-track{height:16px;background:#e9f0ee;border-radius:999px;margin:16px 0 8px;position:relative;overflow:visible}.meter-track i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#51d7c5,var(--brand));transition:.5s}.meter-track b{position:absolute;top:-6px;width:4px;height:28px;background:#102725;border-radius:4px;left:50%;opacity:.6}
.recommend{padding:20px;border-radius:22px;background:#0d3736;color:#fff;margin:18px 0}.recommend h3{margin:0 0 10px}.recommend ul{margin:0;padding-left:20px;color:rgba(255,255,255,.78);line-height:1.7}
.sources-note{background:var(--warn);border:1px solid #f0dfaa;margin-bottom:18px}.sources-note p{margin:5px 0 0;font-size:12px;color:#695a30}
footer{padding:16px 5px;color:var(--muted);font-size:11px}.hidden{display:none!important}
@media(max-width:800px){.hero{grid-template-columns:1fr}.water-preview{order:-1}.result-hero{flex-direction:column;align-items:flex-start}.result-grid{grid-template-columns:1fr 1fr}.four{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shell{width:calc(100% - 14px)}.card{padding:18px;border-radius:22px}h1{font-size:40px}h2{font-size:30px}.hero-facts,.two,.three,.four,.row,.result-grid{grid-template-columns:1fr}.actions{flex-direction:column}.actions .secondary,.actions .primary{width:100%}}