:root{--b:#0a6ebd;--bg:#f2f7fb;--ok:#1a9e55;--lo:#d98a00;--hi:#d33;--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom)}
*{box-sizing:border-box}body{margin:0;font:16px/1.4 -apple-system,system-ui,Roboto,sans-serif;background:var(--bg);color:#123;-webkit-tap-highlight-color:transparent}
header{position:sticky;top:0;z-index:5;background:linear-gradient(135deg,#0a6ebd,#16a5d8);color:#fff;padding:calc(var(--sat) + 10px) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));display:flex;justify-content:space-between;align-items:center}
header h1{font-size:20px;margin:0}#hdrpool{font-size:13px;opacity:.9}
main{padding:12px max(14px,env(safe-area-inset-right)) calc(84px + var(--sab)) max(14px,env(safe-area-inset-left));max-width:640px;margin:auto}
.tab{display:none}.tab.active{display:block}h2{margin:6px 0}.muted{color:#678;font-size:14px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media(max-width:350px){.grid{grid-template-columns:1fr}}
label{display:flex;flex-direction:column;font-size:13px;font-weight:600;color:#345;gap:4px;margin:6px 0}
input,select{font-size:16px;padding:11px;border:1px solid #c8d6e2;border-radius:10px;background:#fff;width:100%}
button{font:inherit;border:0;border-radius:12px;padding:13px;cursor:pointer}.full{grid-column:1/-1;width:100%;margin:6px 0}
.primary{background:var(--b);color:#fff;font-weight:700}.secondary{background:#e3eef8;color:var(--b);font-weight:600}.secondary:disabled{opacity:.55}.danger{background:#fde8e8;color:var(--hi)}
.card{background:#fff;border-radius:14px;padding:14px;margin:12px 0;box-shadow:0 1px 4px #0001}
.pill{float:right;font-size:12px;padding:2px 9px;border-radius:9px;color:#fff}.ok{background:var(--ok)}.low{background:var(--lo)}.high{background:var(--hi)}
.row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eef}.row:last-child{border:0}
.dose{background:#f4f9fd;border-radius:8px;padding:6px 10px;margin:4px 0;font-size:14px}.step{border-left:4px solid var(--b);padding-left:10px;margin:10px 0}
.safety{background:#fff8e6}.disclaimer{font-size:12px;color:#789}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #dde;padding-bottom:var(--sab)}
nav button{flex:1;background:none;font-size:20px;padding:8px 0;color:#789;position:relative;border-radius:0}nav span{display:block;font-size:11px}nav .on{color:var(--b)}
#dueBadge:not(:empty){position:absolute;top:4px;right:28%;background:var(--hi);color:#fff;font-size:10px;font-style:normal;border-radius:8px;padding:1px 5px}
.hint{display:block;margin:10px 14px 0;background:#e3f3ff;border-radius:12px;padding:10px 12px;font-size:14px;width:calc(100% - 28px);text-align:left}.hint button{float:right;padding:0 6px;background:none}
canvas{width:100%;background:#fff;border-radius:14px}.task.due{border-left:4px solid var(--hi)}