:root{--g:#087F8C;--g2:#087F8C;--gl:#DDF4EC;--sky:#DCEFFA;--or:#C88525;--bg:#F8FAF9;--ink:#172B36;--mut:#64748B;--line:#E3EAE8;--red:#D65A5A;--redt:#B03F3F;--amb:#C88525;--ambt:#8A5A12;--ok:#23856D}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#dfe7e3;color:var(--ink);line-height:1.45}
.notice{background:#fff3d6;color:#5c3d00;padding:.45rem 1rem;font-size:.82rem;text-align:center;border-bottom:1px solid #f0d9a0}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:84px;box-shadow:0 0 30px rgba(0,0,0,.08)}
.top{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;background:#fff;position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:.4rem}h1{margin:0;font-size:1.5rem;color:var(--g);letter-spacing:-.02em}.deva{color:var(--mut);font-size:1rem}
.lang{display:flex;background:var(--bg);border-radius:99px;padding:3px}
.lang button{border:0;background:transparent;padding:.35rem .6rem;border-radius:99px;font-size:.85rem;color:var(--mut);cursor:pointer;font-family:inherit}
.lang button[aria-pressed=true]{background:var(--g);color:#fff}
main{padding:0 1rem 1rem}
.hero{margin:0 -1rem;padding:1.1rem 1rem 1.4rem;background:linear-gradient(160deg,var(--g),var(--g2));color:#fff;border-radius:0 0 28px 28px}
.hero.small{padding-bottom:1.2rem}.hero .hi{margin:0;opacity:.9;font-size:.95rem}.hero .big{margin:.3rem 0 0;font-size:1.3rem;font-weight:700;line-height:1.3}
.hero-title{margin:0 0 .8rem;font-size:1.15rem}
.ringrow{display:flex;align-items:center;gap:1.1rem}
.ring{position:relative;width:132px;height:132px;flex:none}
.ring svg{width:100%;height:100%}.ring .bg{fill:none;stroke:rgba(255,255,255,.25);stroke-width:11}
.ring .fg{fill:none;stroke:#ffd27a;stroke-width:11;stroke-linecap:round;transition:stroke-dasharray .6s}
.ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-in b{font-size:1.9rem;line-height:1}.ring-in span{font-size:.68rem;opacity:.9;max-width:86px;margin-top:.2rem}
.stats{flex:1;display:grid;gap:.5rem}
.stat{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.16);border-radius:14px;padding:.4rem .7rem}
.stat .ic{font-size:1.3rem}.stat b{display:block;font-size:1rem;line-height:1.1}.stat small{opacity:.85;font-size:.72rem}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem}
button.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;background:#fff;border:1px solid var(--line);border-radius:18px;padding:.9rem .3rem;min-height:98px;font-family:inherit;font-size:.86rem;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 rgba(13,107,79,.12)}
button.tile .ico{font-size:1.9rem;background:var(--gl);width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center}
button.tile:active{background:var(--gl)}
button.tile.warn .ico{background:#fde8e6}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem;margin:.8rem 0}
.card h3{margin:0 0 .5rem;font-size:.8rem;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.composer .lbl{display:block;font-weight:600;margin-bottom:.4rem}
textarea{width:100%;font-size:1.05rem;padding:.7rem .8rem;border:2px solid var(--line);border-radius:14px;font-family:inherit;resize:vertical;background:#fafcfb}
textarea:focus{border-color:var(--g2);outline:none}
.row{display:flex;gap:.6rem;margin-top:.6rem}
button{font-family:inherit;cursor:pointer}
.send{flex:1;background:var(--or);color:#fff;border:0;border-radius:14px;font-size:1.15rem;font-weight:700;padding:.9rem;box-shadow:0 3px 0 #d85f00}
.send:active{transform:translateY(2px);box-shadow:none}
.mic{background:var(--gl);color:var(--g);border:0;border-radius:14px;padding:.9rem 1rem;font-size:1rem;font-weight:600}
.ghost{flex:1;background:#fff;color:var(--g);border:1px solid var(--g);border-radius:14px;padding:.7rem;font-size:.95rem}
button:focus-visible,textarea:focus-visible{outline:3px solid #f0a500;outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem}
.chips button{font-size:.8rem;padding:.3rem .65rem;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--mut)}
.reply{background:var(--gl);border:1px solid #bfe3d2;border-radius:16px;padding:1rem;margin:.8rem 0;font-size:1.05rem}
.reply .q{font-weight:600}
.alert{background:#fde8e6;border:2px solid var(--red);color:#5c0f0a;border-radius:16px;padding:1rem;margin:.8rem 0;font-size:1.05rem}
.alert a{color:var(--red);font-weight:700}
.summary ul{margin:0;padding-left:1.1rem}.summary li{margin:.2rem 0}
.nudge{border-left:6px solid var(--or)}.nudge.ok{border-left-color:var(--ok)}
.nudge p{margin:.2rem 0 .6rem}
.nudge a{display:inline-block;background:var(--g);color:#fff;padding:.55rem 1rem;border-radius:12px;text-decoration:none;font-weight:600}
ul.plain{list-style:none;padding:0;margin:0}ul.plain li{padding:.45rem 0;border-bottom:1px solid var(--line)}ul.plain li:last-child{border:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.grid .card{margin:0}
.muted{color:var(--mut);font-size:.88rem;margin:.4rem 0 0}
.bar{height:12px;background:#e6ede9;border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--g2);transition:width .5s;border-radius:99px}
.tag{display:inline-block;font-size:.7rem;padding:.05rem .45rem;border-radius:99px;background:#fff3d6;color:#7a4b00;margin-left:.3rem}
.ok{color:var(--ok)}.warn{color:var(--amb)}.bad{color:var(--red)}
.row.small{margin:1rem 0 0}
.mode{font-size:.74rem;color:var(--mut);text-align:center;margin:1rem 0 0}
footer{color:var(--mut);font-size:.78rem;text-align:center}
a{color:var(--g)}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--line);display:flex;padding:.4rem .6rem calc(.4rem + env(safe-area-inset-bottom));z-index:10}
.tabbar button{flex:1;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.4rem;font-size:.8rem;color:var(--mut);border-radius:12px}
.tabbar .ic{font-size:1.4rem}
.tabbar button[aria-selected=true]{color:var(--g);font-weight:700;background:var(--gl)}

/* ---- UX polish ---- */
.logo{width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--g),var(--g2));color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-right:.1rem;align-self:center}
.logo svg{width:17px;height:17px}
.brand{align-items:center}
.date{margin:0 0 .15rem;font-size:.85rem;opacity:.85}
.hero-title{font-size:1.2rem;margin:0 0 1rem}
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.07)}
.status{display:flex;align-items:center;gap:.8rem;margin:-1rem 0 .8rem;padding:.9rem 1rem;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(13,107,79,.12);position:relative;z-index:1;animation:rise .35s ease}
.status .si{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff}
.status .st{flex:1;display:flex;flex-direction:column;line-height:1.25}.status .st b{font-size:1.05rem}.status .st span{font-size:.85rem;color:var(--mut)}
.status button{flex:none;background:var(--g);color:#fff;border:0;border-radius:12px;padding:.55rem .8rem;font-size:.85rem;font-weight:600}
.s-ok{border-left:6px solid var(--ok)}.s-ok .si{background:var(--ok)}
.s-watch{border-left:6px solid #e0a100}.s-watch .si{background:#e0a100}
.s-red{border-left:6px solid var(--red);background:#fff5f4}.s-red .si{background:var(--red)}
.s-none{border-left:6px solid #9aa8a2}.s-none .si{background:#9aa8a2}
.recent .rh{display:flex;align-items:center;justify-content:space-between}
.recent .rh h3{margin:0}
.undo{background:transparent;border:1px solid var(--line);color:var(--g);border-radius:99px;padding:.25rem .8rem;font-size:.82rem}
ul.plain li{display:flex;gap:.7rem}
.rt{flex:none;min-width:3.2rem;color:var(--mut);font-size:.82rem;padding-top:.1rem}
.tabbar .ti{width:24px;height:24px}
button.tile{transition:transform .12s,box-shadow .12s,background .12s}
button.tile:active{transform:scale(.96);box-shadow:none}
.reply{animation:rise .3s ease}
section{animation:fade .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.card{box-shadow:0 1px 2px rgba(0,0,0,.03)}
button.tile .ico{transition:transform .15s}button.tile:hover .ico{transform:scale(1.06)}

/* ---- Design direction: calm premium health palette (flat, low-contrast shadows, AA text) ---- */
body{background:#E9EFED;font-size:16px;line-height:1.5;color:var(--ink)}
.app{background:var(--bg)}
.notice{background:#FBF1DC;color:#6B4710;border-bottom:1px solid #F0DEB6}
.top{background:#fff}
h1{color:var(--ink)}
.logo{background:var(--g)}
.hero{background:var(--g);border-radius:0 0 24px 24px}
.hero::after{background:rgba(255,255,255,.06)}
.ring .bg{stroke:rgba(255,255,255,.22)}
.ring .fg{stroke:var(--gl)}
.stat{background:rgba(255,255,255,.14)}
.send{background:var(--g);box-shadow:0 2px 0 #066672;font-size:1.2rem;min-height:56px}
.send:active{transform:translateY(1px);box-shadow:none}
.mic{background:var(--gl);color:#066672;min-height:56px}
.ghost{color:#066672;border-color:#8BC7CE;min-height:48px}
button.tile{min-height:104px;border:1px solid var(--line);box-shadow:0 1px 0 rgba(23,43,54,.06)}
button.tile .ico{background:var(--gl)}
button.tile.warn .ico{background:#FBE4E4}
.lang button{min-height:40px;padding:.4rem .75rem}
.chips button{min-height:40px;padding:.45rem .8rem;color:#475569}
.tabbar button{min-height:56px}
.tabbar button[aria-selected=true]{color:#066672;background:var(--gl)}
.undo{min-height:40px;color:#066672}
.card{border-color:var(--line);border-radius:16px;box-shadow:none}
.summary li{margin:.3rem 0}
.reply{background:var(--gl);border-color:#BFE6D8;color:var(--ink)}
.alert{background:#FDECEC;border:2px solid var(--red);color:#5B1F1F}
.alert a,.bad{color:var(--redt)}
.warn{color:var(--ambt)}
.ok{color:var(--ok)}
.tag{background:#FBF1DC;color:var(--ambt)}
.status{border-radius:16px;box-shadow:0 4px 14px rgba(23,43,54,.08)}
.s-ok{border-left-color:var(--ok)}.s-ok .si{background:var(--ok)}
.s-watch{border-left-color:var(--amb)}.s-watch .si{background:var(--amb)}
.s-red{border-left-color:var(--red);background:#FFF6F6}.s-red .si{background:var(--redt)}
.s-none{border-left-color:#94A3B8}.s-none .si{background:#64748B}
.status button{background:var(--g);min-height:44px}
.nudge{border-left-color:var(--amb)}.nudge.ok{border-left-color:var(--ok)}
.nudge a{background:var(--g);min-height:44px;display:inline-flex;align-items:center}
.bar{background:#E3EAE8}.bar i{background:var(--g)}
button:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #087F8C;outline-offset:2px}
textarea:focus{border-color:var(--g)}
a{color:#066672}

/* ---- icons, illustration, energy, goals ---- */
.svgi{width:26px;height:26px}
.stat .ic .svgi{width:22px;height:22px;color:#fff}
button.tile .ico .svgi{width:28px;height:28px;color:#087F8C}
button.tile.warn .ico .svgi{color:#B03F3F}
button.tile .ico{font-size:0}
.hero.small{position:relative;overflow:hidden;padding-right:7.5rem}
.hero .art{position:absolute;right:-6px;top:6px;width:150px;height:118px;pointer-events:none}
.energy .e3{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;text-align:center;margin:.2rem 0 .4rem}
.energy .e3 div{background:var(--gl);border-radius:14px;padding:.6rem .2rem}
.energy .e3 div:nth-child(2){background:var(--sky)}
.energy b{display:block;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.energy small{color:var(--mut);font-size:.78rem}
.goals .rh{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem}.goals .rh h3{margin:0}
.goal-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.goal-list li{display:grid;grid-template-columns:38px 1fr auto;gap:.2rem .7rem;align-items:center}
.goal-list .gi{width:38px;height:38px;border-radius:50%;background:var(--gl);color:#087F8C;display:flex;align-items:center;justify-content:center}
.goal-list .gi .svgi{width:20px;height:20px}
.goal-list .gl{font-weight:600}.goal-list .gl small{display:block;font-weight:400;color:var(--mut);font-size:.82rem}
.goal-list .gd{width:28px;height:28px;border-radius:50%;background:#E3EAE8;color:#fff;display:flex;align-items:center;justify-content:center}
.goal-list .gd .svgi{width:16px;height:16px}
.goal-list .gd.on{background:var(--ok)}
.goal-list .gb{grid-column:2 / 4}
.goal-list .bar.over i{background:var(--amb)}
#goal-form label{display:flex;align-items:center;gap:.5rem;margin:.6rem 0;font-weight:600}
#goal-form label span{flex:1;font-weight:500}
#goal-form input{width:110px;font-size:1.05rem;padding:.55rem .6rem;border:2px solid var(--line);border-radius:12px;font-family:inherit;text-align:right}
#goal-form .row .ghost,#goal-form .row .send{min-height:48px;font-size:1rem}

/* ---- colour illustrations on tiles ---- */
button.tile .ico{width:66px;height:66px;border-radius:20px;font-size:0}
button.tile .ico .art64{width:56px;height:56px}
button.tile .ico.t0{background:#DDF4EC}button.tile .ico.t1{background:#DCEFFA}button.tile .ico.t2{background:#DCEFFA}
button.tile .ico.t3{background:#FFF4DC}button.tile .ico.t4{background:#FFF4DC}button.tile .ico.t5{background:#FBE4E4}
button.tile{min-height:116px}
.hero .art{width:160px;height:126px;right:-8px;top:2px}

/* app icon in header: the SVG carries its own rounded square */
.logo{background:none;width:34px;height:34px;border-radius:0;margin-right:.15rem}
.logo svg{width:34px;height:34px;display:block}