/* brand-tokens:begin -- auto-generated from 000_Agent/skills/_shared/brand/tokens.json; edit tokens.json then run brand.py sync */
:root{--hb-paper:#F7F3EC;--hb-paper-rgb:247 243 236;--hb-oat:#F0EAD9;--hb-oat-rgb:240 234 217;--hb-apricot:#E8DCC8;--hb-apricot-rgb:232 220 200;--hb-warmgray:#A69C8D;--hb-warmgray-rgb:166 156 141;--hb-ink:#2C4A3E;--hb-ink-rgb:44 74 62;--hb-olive:#6B7A55;--hb-olive-rgb:107 122 85;--hb-tea:#8A6E52;--hb-tea-rgb:138 110 82;--hb-gold:#B08D57;--hb-gold-rgb:176 141 87;--hb-seal:#B5533C;--hb-seal-rgb:181 83 60;--hb-ochre:#C97C4B;--hb-ochre-rgb:201 124 75;--hb-text:#33302A;--hb-text-rgb:51 48 42;--hb-text-soft:#6B6355;--hb-text-soft-rgb:107 99 85;--hb-text-note:#8C8474;--hb-text-note-rgb:140 132 116;--hb-text-web:#5B5347;--hb-text-web-rgb:91 83 71;--hb-cream:#FFFDF7;--hb-cream-rgb:255 253 247;--hb-panel:#FDFBF6;--hb-panel-rgb:253 251 246;--hb-panel-alt:#FBF6EC;--hb-panel-alt-rgb:251 246 236;--hb-sand:#EAD8BA;--hb-sand-rgb:234 216 186;--hb-rule:#C9C0AE;--hb-rule-rgb:201 192 174;--hb-line:#D4C8B4;--hb-line-rgb:212 200 180;--hb-frame:#E2D9C6;--hb-frame-rgb:226 217 198;--hb-band:#1F1A17;--hb-band-rgb:31 26 23;--hb-band-text:#F2EDE4;--hb-band-text-rgb:242 237 228;--hb-band-gold:#BF9F62;--hb-band-gold-rgb:191 159 98;--hb-desk:#DDD6C7;--hb-desk-rgb:221 214 199;--hb-desk-light:#EDE8DF;--hb-desk-light-rgb:237 232 223;--hb-font-serif:"Noto Serif TC","Songti TC",serif;--hb-font-hand:"Hanzipen TC","\007FE9\007FE9\009AD4-\007E41","Hanzipen SC",cursive;--hb-font-masthead:Georgia,serif;}
/* brand-tokens:end */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--hb-paper);
  color: var(--hb-text);
  font-family: var(--hb-font-serif);
  font-size: 17px;
  line-height: 1.6;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--hb-ink); }
h1, h2, h3 { font-weight: 600; color: var(--hb-ink); line-height: 1.35; margin: 0 0 .5em; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8em; }

.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--hb-ink);
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hb-cream); }
.brand img { border-radius: 50%; background: var(--hb-cream); }
.brand span { display: flex; flex-direction: column; line-height: 1.25; }
.brand b { font-weight: 600; font-size: 1.05rem; }
.brand small { color: var(--hb-band-gold); font-size: .85rem; letter-spacing: .08em; }

.banner { background: var(--hb-sand); color: var(--hb-text); padding: 10px 16px; font-size: .92rem; }
.banner a { font-weight: 600; margin-left: .3em; }

main { max-width: 640px; margin: 0 auto; padding: 18px 16px 8px; }

.card {
  background: var(--hb-panel);
  border: 1px solid var(--hb-frame);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
}
.card.soft { background: var(--hb-panel-alt); }
.muted { color: var(--hb-text-soft); }
.note { color: var(--hb-text-note); font-size: .88rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; padding: 0 20px;
  border-radius: 999px; border: 1px solid var(--hb-ink);
  background: var(--hb-ink); color: var(--hb-cream);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--hb-ink); }
.btn.warn { background: transparent; color: var(--hb-seal); border-color: var(--hb-seal); }
.btn.block { display: flex; width: 100%; }
.btn.seal { background: var(--hb-seal); border-color: var(--hb-seal); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > .btn { flex: 1 1 140px; }

/* 孩子清單 */
.kid {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
.kid .dot {
  flex: 0 0 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--hb-apricot); color: var(--hb-ink); font-weight: 600; font-size: 1.3rem;
}
.kid .meta { flex: 1; min-width: 0; }
.kid .meta b { display: block; font-size: 1.1rem; color: var(--hb-ink); }
.kid .arrow { color: var(--hb-warmgray); font-size: 1.4rem; }

/* 表單 */
form label { display: block; margin-bottom: 14px; font-weight: 600; color: var(--hb-text-soft); font-size: .95rem; }
form label .opt { font-weight: 400; color: var(--hb-text-note); }
input, select {
  display: block; width: 100%; margin-top: 6px;
  min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--hb-line); border-radius: 10px;
  background: var(--hb-cream); color: var(--hb-text);
  font: inherit; font-size: 1.05rem;
}
input:focus, select:focus { outline: 2px solid var(--hb-olive); outline-offset: 1px; }
.seg { display: flex; gap: 8px; margin-top: 6px; }
.seg label { flex: 1; margin: 0; position: relative; }
.seg input { position: absolute; inset: 0; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.seg span {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px solid var(--hb-line); border-radius: 10px; background: var(--hb-cream);
  color: var(--hb-text); font-weight: 400;
}
.seg input:checked + span { background: var(--hb-ink); color: var(--hb-cream); border-color: var(--hb-ink); font-weight: 600; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.err { color: var(--hb-seal); font-size: .92rem; min-height: 1.2em; }

/* 數字卡 */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--hb-panel); border: 1px solid var(--hb-frame); border-radius: 14px; padding: 12px 14px; }
.stat .k { font-size: .85rem; color: var(--hb-text-soft); }
.stat .v { font-size: 1.6rem; font-weight: 700; color: var(--hb-ink); line-height: 1.2; }
.stat .v small { font-size: .9rem; font-weight: 400; color: var(--hb-text-soft); margin-left: 2px; }
.stat .s { font-size: .85rem; color: var(--hb-text-note); }
.stat.hi { background: var(--hb-oat); border-color: var(--hb-sand); }
.stat.hi .v { color: var(--hb-seal); }
.stat.wide { grid-column: 1 / -1; }

.tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.tabs button {
  flex: 1; min-height: 40px; border-radius: 999px; border: 1px solid var(--hb-line);
  background: var(--hb-cream); color: var(--hb-text-soft); font: inherit; cursor: pointer;
}
.tabs button.on { background: var(--hb-ink); color: var(--hb-cream); border-color: var(--hb-ink); font-weight: 600; }
canvas.chart { display: block; width: 100%; height: auto; }

/* 紀錄表 */
table.recs { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.recs th { text-align: left; font-weight: 600; color: var(--hb-text-soft); font-size: .82rem; padding: 6px 4px; border-bottom: 1px solid var(--hb-line); }
table.recs td { padding: 10px 4px; border-bottom: 1px solid var(--hb-frame); vertical-align: top; }
table.recs td.num { font-variant-numeric: tabular-nums; }
table.recs a { text-decoration: none; }
.place { display: inline-block; font-size: .75rem; color: var(--hb-tea); border: 1px solid var(--hb-sand); border-radius: 6px; padding: 0 5px; margin-left: 4px; }

.foot { max-width: 640px; margin: 10px auto 30px; padding: 0 16px; color: var(--hb-text-note); font-size: .82rem; text-align: center; }
.foot a { color: var(--hb-text-soft); }

/* 彙總圖預覽 */
.modal {
  position: fixed; inset: 0; z-index: 20;
  background: rgb(var(--hb-band-rgb) / .78);
  overflow-y: auto; padding: calc(16px + env(safe-area-inset-top)) 16px 24px;
}
.modal .sheet { max-width: 520px; margin: 0 auto; background: var(--hb-paper); border-radius: 16px; padding: 16px; }
.modal img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--hb-frame); margin: 10px 0 14px; }
.modal .btn { margin-bottom: 10px; }

ol.steps { padding-left: 1.3em; margin: 0 0 .8em; }
ol.steps li { margin-bottom: .4em; }
.empty { text-align: center; padding: 26px 10px; }
.empty .big { font-size: 2.4rem; }