/* health.8eiou.com — shared styles. Calm, pine/teal health palette; mobile-first. */
:root{
  --bg:#f6f7f4; --surface:#ffffff; --surface-2:#f0f2ee;
  --ink:#182420; --muted:#5c6b64; --faint:#8b988f;
  --line:#e1e6df; --line-strong:#cdd5cd;
  --accent:#137a6d; --accent-soft:#d7ebe6;
  --good:#2f8f6a; --warn:#b7822a; --clay:#b1502e;
  --radius:14px; --maxw:720px;
  --shadow:0 1px 2px rgba(24,36,32,.04), 0 8px 24px -14px rgba(24,36,32,.14);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1613; --surface:#15201c; --surface-2:#19251f;
    --ink:#e7ede9; --muted:#9baaa1; --faint:#6f8078;
    --line:#23322d; --line-strong:#2f4139;
    --accent:#52cbba; --accent-soft:#163831;
    --good:#57c295; --warn:#d3a24d; --clay:#e2926a;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -16px rgba(0,0,0,.6);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:24px 18px 64px}
a{color:var(--accent); text-underline-offset:2px}
h1{font-size:1.6rem; line-height:1.2; margin:0 0 4px; letter-spacing:-.01em}
h2{font-size:1.05rem; margin:28px 0 12px; letter-spacing:.01em}
.eyebrow{font:600 .72rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.sub{color:var(--muted); margin:2px 0 0}
.muted{color:var(--muted)} .faint{color:var(--faint)} .mono{font-family:var(--mono)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px}
.grid{display:grid; gap:12px}
.row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.spread{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.pill{display:inline-block; font:600 .7rem/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; padding:5px 8px; border-radius:6px; background:var(--accent-soft); color:var(--accent)}
.big{font-size:2rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:12px 16px; font:600 .95rem/1 var(--sans); text-decoration:none; cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line-strong)}
.btn:active{transform:translateY(1px)}
/* progress bar */
.bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-top:8px}
.bar > i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s ease}
.bar.good > i{background:var(--good)} .bar.warn > i{background:var(--warn)}
/* week grid */
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:6px}
.day{background:var(--surface-2); border-radius:10px; padding:8px 4px; text-align:center; min-height:74px}
.day .dn{font:600 .62rem/1 var(--mono); color:var(--faint); text-transform:uppercase; letter-spacing:.04em}
.day .dd{font:600 .8rem/1.2 var(--sans); color:var(--muted); margin-top:2px}
.day.today{outline:2px solid var(--accent); outline-offset:-2px}
.dots{display:flex; gap:3px; justify-content:center; margin-top:6px; flex-wrap:wrap}
.dot{width:8px; height:8px; border-radius:50%; background:var(--line-strong)}
.dot.s{background:var(--accent)} .dot.c{background:var(--good)} .dot.h{background:var(--clay)}
.chk{font-size:.85rem; margin-top:3px}
.footer{margin-top:40px; padding-top:16px; border-top:1px solid var(--line); color:var(--faint); font-size:.82rem}
label{display:block; font:600 .78rem/1.2 var(--sans); color:var(--muted); margin:14px 0 6px}
input[type=number],input[type=text],input[type=password]{width:100%; padding:12px; font-size:1rem; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink)}
.toggle{display:flex; gap:8px; flex-wrap:wrap}
.toggle button{flex:1; min-width:90px; padding:12px; border:1px solid var(--line-strong); border-radius:10px; background:var(--surface); color:var(--ink); font:600 .9rem/1 var(--sans); cursor:pointer}
.toggle button[aria-pressed=true]{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}