[hidden] { display: none !important; }
:root {
  --bg: #f6f3ec; --card: #fffdf8; --ink: #2c2a26; --sub: #6d685e; --line: #e2dccf;
  --accent: #2f7d6b; --accent2: #c46a3c; --good: #3f9d6a; --mid: #e0a83a; --low: #d0654f;
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1a18; --card: #262421; --ink: #f1ede4; --sub: #b0a998; --line: #3d3a34;
    --accent: #5fbfa6; --accent2: #e3915f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; margin-top: 1em; }
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--accent); color: #fff; }
.brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
#nav { display: flex; gap: 4px; }
#nav a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 999px; font-size: .9rem; }
#nav a.on { background: rgba(255,255,255,.22); }
main { max-width: 720px; margin: 0 auto; padding: 16px; display: grid; gap: 14px; padding-bottom: 48px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.note { color: var(--sub); font-size: .85rem; }
.warn { color: var(--low); font-weight: 600; }
.pre { white-space: pre-wrap; }
.big { font-size: 2rem; font-weight: 700; margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.danger { color: var(--low); border-color: var(--low); }
.btn.small { min-height: 32px; padding: 2px 10px; font-size: .85rem; }
.btn.wide { width: 100%; }
input, select, textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-height: 44px; }
textarea { resize: vertical; }
label { display: block; }
.stack { display: grid; gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 0; min-width: 0; }
legend { font-weight: 700; padding: 0 4px; }
label.radio { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
label.radio input, .checks input, .share input, .switch input { width: 22px; height: 22px; min-height: 0; flex: none; }
.login { max-width: 420px; justify-self: center; width: 100%; }
.login form { display: grid; gap: 12px; margin-top: 12px; }

.daynav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.family { display: grid; gap: 12px; }
@media (min-width: 640px) { .family { grid-template-columns: 1fr 1fr; } }
.member-card { display: flex; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; color: inherit; text-decoration: none; min-width: 0; }
.mc-body { min-width: 0; }
.mc-body h3 { margin: 0; font-size: 1.15rem; } .mc-body h3 small { color: var(--sub); font-weight: 400; margin-left: 6px; font-size: .85rem; }
.mc-line { margin: 2px 0; font-size: .9rem; } .mc-low { margin: 0; color: var(--low); font-size: .9rem; } .mc-ok { margin: 0; color: var(--good); font-size: .9rem; }

.avatar { width: var(--size); height: var(--size); flex: none; border-radius: 50%; padding: 4px; background: var(--ring);
  display: grid; place-items: center; }
.avatar img, .avatar span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); }
.avatar span { display: grid; place-items: center; background: var(--bg); font-size: calc(var(--size) * .4); font-weight: 700; color: var(--accent); }
.hero { display: flex; gap: 16px; align-items: center; }
.hero h1 { margin: 0; }

.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.seg.wrap { flex-wrap: wrap; }
.seg button, .seg a { flex: none; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.seg [aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.tabs { justify-content: stretch; } .tabs a { flex: 1; text-align: center; }
.pill { display: inline-block; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: .9rem; margin: 0 0 8px; }

.gauges { display: grid; gap: 10px; }
@media (min-width: 640px) { .gauges { grid-template-columns: 1fr 1fr; } }
.gauge { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; }
.g-label { font-weight: 700; } .g-val { font-size: .85rem; color: var(--sub); text-align: right; }
.gauge .bar { grid-column: 1 / -1; height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.gauge .bar i { display: block; height: 100%; border-radius: 999px; background: var(--mid); }
.gauge.ok .bar i { background: var(--good); } .gauge.low .bar i { background: var(--low); } .gauge.over .bar i { background: var(--low); }
.gauge small { grid-column: 1 / -1; color: var(--sub); font-size: .8rem; }
.notes { padding-left: 1.2em; color: var(--sub); font-size: .82rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chips button { display: flex; flex-direction: column; align-items: flex-start; min-height: 48px; padding: 6px 12px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.chips small, .results small { color: var(--sub); font-size: .75rem; }
.results { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.results button { width: 100%; text-align: left; display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.items li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; }
.it-name { flex: 1 1 100%; font-weight: 600; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 1.2rem; cursor: pointer; }
.grams { display: inline-flex; align-items: center; gap: 4px; flex: 1; } .grams input { width: 90px; }
.shares { display: grid; gap: 8px; margin-bottom: 12px; }
.share { display: grid; grid-template-columns: auto 1fr 120px; gap: 10px; align-items: center; }
.checks { list-style: none; padding: 0; display: grid; gap: 4px; }
.checks label { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.cond { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.cond .seg button { width: 40px; padding: 0; }
.meal { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.plain { list-style: none; padding: 0; } .plain.small { font-size: .9rem; }
.row3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .row3 input[type=date] { grid-column: 1 / -1; } .row3 .btn { grid-column: 1 / -1; }
.astro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.imgs { display: grid; gap: 10px; } .imgs img { width: 100%; border-radius: 12px; border: 1px solid var(--line); }
.chart svg { width: 100%; height: auto; background: var(--bg); border-radius: 12px; }
.chart figcaption { font-size: .85rem; color: var(--sub); }
figure { margin: 8px 0; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: right; } th:first-child, td:first-child { text-align: left; }
tr.rec td { background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 700; }
table.mini td { text-align: left; }
details summary { cursor: pointer; color: var(--accent); margin: 8px 0; }
.switch { display: flex; gap: 10px; align-items: center; }
#toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: calc(100% - 32px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 999px; z-index: 10; font-size: .9rem; }