:root { --bg:#f5f1e8; --card:#fffdf8; --ink:#171717; --muted:#6e6b63; --line:#dcd5c8; --accent:#5a7dff; --mint:#a8e6cf; --yellow:#ffd166; --pink:#ff8fab; --danger:#9d2d2d; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; background:var(--bg); color:var(--ink); }
header,main { width:min(100% - 28px,640px); margin:auto; }
header { display:flex; align-items:flex-start; justify-content:space-between; padding:24px 0 10px; }
h1 { font-size:30px; margin:0 0 3px; letter-spacing:-1px; }
.title-dot { color:var(--pink); font-size:16px; vertical-align:middle; }
header p { color:var(--muted); margin:0; font-size:14px; }
main { padding-bottom:52px; }
section, details { background:var(--card); border:2px solid var(--ink); border-radius:16px; margin:12px 0; padding:16px; box-shadow:4px 4px 0 var(--ink); }
section:nth-of-type(1){background:var(--yellow)} section:nth-of-type(2){background:#eef2ff} section:nth-of-type(3){background:#edfff7}
h2 { font-size:18px; margin:0 0 13px; letter-spacing:-.2px; }
.doodle { font-size:11px; font-weight:500; color:var(--muted); margin-right:5px; transform:rotate(-2deg); display:inline-block; }
.summary { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding:14px 8px; }
.summary div { text-align:center; border-left:1px solid var(--line); padding:2px 5px; }
.summary div:last-child { border-left:0; }
.summary span { display:block; color:var(--muted); font-size:11px; margin-bottom:5px; }
.summary strong { font-size:17px; }
.row-form { display:flex; gap:8px; direction:ltr; }
input,textarea,button,.import-label { font:inherit; }
input,textarea { width:100%; background:#fff; border:1px solid #c9c9c3; border-radius:10px; color:var(--ink); padding:12px; }
textarea { resize:vertical; margin:10px 0 8px; }
button,.import-label { border:2px solid var(--ink); border-radius:10px; padding:11px 15px; background:var(--ink); color:#fff; cursor:pointer; box-shadow:2px 2px 0 rgba(0,0,0,.2); font-weight:600; }
.text-btn { color:var(--ink); background:var(--yellow); padding:7px 11px; font-size:13px; }
.full { width:100%; background:var(--accent); }
.hint,.tiny { font-size:12px; color:var(--muted); margin:8px 0 0; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chips button { background:#fff; color:#373733; padding:8px 13px; font-size:13px; }
.chips button.selected { background:var(--yellow); color:#171717; box-shadow:inset 0 0 0 1px #6fae96; }
.section-title { display:flex; justify-content:space-between; align-items:center; }
.section-title span { color:var(--muted); font-size:13px; }
.log-item { padding:11px 0; border-top:1px solid #ecece7; display:grid; grid-template-columns:1fr auto; gap:4px 10px; }
.log-item:first-child { border-top:0; padding-top:0; }
.log-item p { margin:0; }
.log-item small { color:var(--muted); }
.delete { background:transparent; color:var(--muted); padding:5px; font-size:18px; grid-row:1/3; grid-column:2; }
.empty { color:var(--muted); font-size:14px; margin:4px 0; }
.chart { min-height:190px; background:#fff; border:2px solid var(--ink); border-radius:12px; padding:8px; margin-top:12px; overflow:hidden; }
.chart svg { width:100%; height:175px; display:block; }
.chart text { font-size:10px; fill:var(--muted); }
.week-summary { font-size:14px; line-height:1.65; }
.week-summary strong { font-size:18px; }
details summary { cursor:pointer; font-weight:600; }
details p { color:var(--muted); font-size:13px; }
.settings-actions { display:flex; gap:8px; margin-top:12px; }
.import-label { display:inline-block; background:#555; }
.import-label input { display:none; }
.danger { background:#fff; color:var(--danger); border:1px solid #d9aaaa; }
#toast { position:fixed; bottom:18px; right:50%; transform:translateX(50%); background:#1c1c1c; color:#fff; border-radius:9px; padding:10px 15px; font-size:13px; opacity:0; pointer-events:none; transition:.2s; }
#toast.show { opacity:1; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:390px){ .summary strong{font-size:15px}.summary span{font-size:10px} }

.estimate { margin:0 0 9px; padding:9px 11px; border:1px dashed var(--muted); border-radius:9px; font-size:12px; }
.estimate b { font-size:15px; color:var(--ink); }
.food-meta { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.kcal { font-weight:700; font-size:13px; }
.tag { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--ink); border-radius:999px; padding:2px 8px; font-size:11px; font-weight:700; }
.tag.green { background:#bdebd8; } .tag.yellow { background:#ffe39a; } .tag.red { background:#ffb3c2; }
.color-key { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:11px; color:var(--muted); }
.color-key span { display:flex; align-items:center; gap:4px; }
.dot { width:10px; height:10px; border-radius:50%; border:1px solid var(--ink); display:inline-block; }
.dot.green{background:#78d6ae}.dot.yellow{background:#ffd166}.dot.red{background:#ff8fab}
select { width:100%; background:#fff; border:1px solid #c9c9c3; border-radius:10px; color:var(--ink); padding:12px; font:inherit; }
.form-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:8px; }
.workout-card { background:#fff0ea !important; }
.movement-card { background:#eefcff !important; }
.balance-card { background:#fff8d9 !important; }
.coral { background:#f16f5c; }
.balance-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.metric { border:1.5px solid var(--ink); border-radius:11px; padding:10px; background:#fff; }
.metric span { display:block; color:var(--muted); font-size:11px; }
.metric strong { display:block; margin-top:3px; font-size:18px; }
.metric.wide { grid-column:1/-1; background:var(--yellow); }
.workout-log { margin-top:10px; border-top:1px dashed var(--muted); padding-top:9px; }
.setting-row { display:grid; grid-template-columns:1fr 110px; gap:10px; align-items:center; font-size:13px; margin-top:14px; }
.pedometer-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.pedometer-row div { display:flex; flex-direction:column; }
.pedometer-row span { font-size:11px; color:var(--muted); }
.pedometer-row strong { font-size:27px; }
.pedometer-row button { background:#1793ad; }
.pedometer-row button.running { background:var(--pink); color:var(--ink); }
.steps-edit { margin-top:12px; }
.tab-page { display:none; } .tab-page.active { display:block; }
.bottom-tabs { position:fixed; z-index:20; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(5,1fr); background:#fffdf8; border-top:2px solid var(--ink); padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
.bottom-tabs button { background:transparent; color:var(--muted); border:0; box-shadow:none; border-radius:9px; padding:5px 2px; display:flex; flex-direction:column; align-items:center; gap:1px; font-size:11px; }
.bottom-tabs button b { font-size:18px; line-height:1; }.bottom-tabs button.active { background:var(--yellow); color:var(--ink); }
main { padding-bottom:92px; }.tab-page>section:first-child { margin-top:8px; }
.item-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.chart .value-label { font-size:12px; font-weight:800; fill:var(--ink); }