:root{
  --olive:#66704a;--olive-dark:#4e5937;--sage:#aab397;--cream:#f7f1e5;--cream-2:#eee5d4;
  --brown:#765d48;--ink:#302d27;--muted:#7b776e;--white:#fffdf8;--line:#ded5c5;
}
*{box-sizing:border-box} body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}
button,input,select{font:inherit}.app{min-height:100vh}.screen{display:none;min-height:100vh}.screen.active{display:block}
.landing{position:relative;overflow:hidden;display:none;background:var(--cream)}.landing.active{display:flex;align-items:center;justify-content:center}
.landing-inner{text-align:center;max-width:620px;padding:32px}.brand{font-family:"Playfair Display",serif;font-size:clamp(48px,9vw,84px);letter-spacing:-3px;color:var(--olive-dark)}
.brand span{color:var(--brown)}.landing p{font-size:18px;color:var(--brown);margin:12px 0 30px}.leaf{position:absolute;color:var(--sage);opacity:.35;font-size:100px}.leaf-a{left:8%;top:15%;transform:rotate(25deg)}.leaf-b{right:8%;bottom:14%;transform:rotate(-25deg);font-size:130px}
.primary{border:0;background:var(--olive-dark);color:white;border-radius:16px;padding:15px 23px;cursor:pointer;font-weight:600;box-shadow:0 8px 20px #4e59371f}.primary span{margin-left:10px}.primary:hover{background:var(--olive)}
.secondary{border:1px solid var(--olive);background:transparent;color:var(--olive-dark);border-radius:16px;padding:14px 20px;font-weight:600;cursor:pointer}
.wide{width:100%;margin:18px 0 40px}.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 760px)/2));border-bottom:1px solid var(--line);background:#f7f1e5e8;position:sticky;top:0;z-index:2;backdrop-filter:blur(8px)}
.back{border:0;background:none;color:var(--olive-dark);font-size:25px;cursor:pointer}.mini-brand{font-family:"Playfair Display",serif;color:var(--olive-dark);font-size:21px}.step{font-size:12px;color:var(--muted)}
.content{max-width:760px;margin:auto;padding:54px 22px 0}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--olive);margin:0 0 10px}.content h1{font-family:"Playfair Display",serif;font-size:40px;line-height:1.1;margin:0 0 10px;color:var(--olive-dark)}.sub{color:var(--muted);line-height:1.6;margin:0 0 28px}
.card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:22px;margin:14px 0;box-shadow:0 6px 22px #765d4809}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{font-size:13px;font-weight:600;color:var(--brown)}input[type=number],select{width:100%;margin-top:8px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--cream);color:var(--ink);outline:none}
h3{margin:0 0 12px;font-family:"Playfair Display",serif;font-size:21px}.hint,small{color:var(--muted);font-size:12px}
.choices{display:flex;flex-wrap:wrap;gap:8px}.choices button{background:var(--cream);border:1px solid var(--line);padding:10px 13px;border-radius:12px;color:var(--brown);cursor:pointer}.choices button.selected{background:var(--olive);color:white;border-color:var(--olive)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:11px}.checks label{font-weight:500;color:var(--ink);background:var(--cream);padding:11px;border-radius:12px}.checks input{accent-color:var(--olive)}
.food-row{padding:17px 0;border-bottom:1px solid var(--line)}.food-row:last-child{border-bottom:0}.food-title{display:flex;align-items:center;gap:12px}.food-title>span{font-size:24px}.food-title div{flex:1}.food-title b{display:block;font-size:15px}.food-title small{display:block;margin-top:3px}.food-title strong{font-size:13px;color:var(--olive-dark)}
input[type=range]{appearance:none;width:100%;height:5px;border-radius:20px;background:var(--cream-2);margin:18px 0 8px;accent-color:var(--olive)}input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--olive-dark);border:4px solid var(--white);box-shadow:0 2px 7px #0002}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.water{background:#e9e8dc}.supp-list{display:grid;gap:12px}.supp{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:17px}.supp-head{display:flex;align-items:center;gap:12px}.supp-head b{flex:1}.supp select{margin-top:12px}
.result-card{display:flex;gap:15px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:20px;padding:19px;margin:12px 0}.rank{font-family:"Playfair Display",serif;font-size:22px;color:var(--brown);width:34px}.result-card h3{margin:0;font-size:22px}.result-card p{margin:4px 0 10px;font-size:12px;color:var(--muted)}.result-card>div{flex:1}.bar{height:8px;background:var(--cream-2);border-radius:10px;overflow:hidden}.bar i{display:block;height:100%;background:var(--olive);border-radius:10px}
.hydration{display:flex;gap:15px;background:var(--olive-dark);color:white;border-radius:22px;padding:22px;margin-top:22px}.hydration .eyebrow{color:#dce2c9}.hydration h2{font-family:"Playfair Display",serif;margin:0 0 7px}.hydration p:last-child{color:#e5e8da;font-size:13px;line-height:1.5;margin:0}.water-icon{font-size:34px}
@media(max-width:600px){.form-grid,.checks{grid-template-columns:1fr}.content{padding-top:38px}.content h1{font-size:34px}.leaf{font-size:65px}}

.scale-note{background:#eee9dd;border:1px solid var(--line);border-radius:18px;padding:15px 17px;margin:18px 0;color:var(--brown);font-size:12px;line-height:1.6}.scale-note b{display:block;font-size:13px;margin-bottom:4px;color:var(--olive-dark)}
.result-card .scale{font-weight:600;font-size:13px}.result-card .scoreline{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:4px 0 10px}.result-card .scoreline p{margin:0}

/* Vit a day UI v4 */