.fam-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; margin-bottom: 18px; }
.fam-name { font-size: clamp(30px, 4vw, 40px); }
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.banner { margin-bottom: 16px; }
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.kid { position: relative; padding: 22px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.kid::before { content: ""; position: absolute; inset: -60px -60px auto auto; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c1) 35%, transparent), transparent); pointer-events: none; }
.kid > * { position: relative; }
.kid-head { display: flex; align-items: center; gap: 12px; }
.kid-head .av { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 30px; background: var(--soft); }
.kid-head h3 { font-size: 24px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bal { margin: 16px 0 4px; }
.bal .big { font-size: clamp(44px, 6vw, 56px); display: inline-block; }
.bal .big.neg { background: none; color: var(--bad); -webkit-text-fill-color: var(--bad); }
.bal .big.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.bal small { display: block; color: var(--muted); font-size: 14px; }
.goal { margin: 14px 0 6px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); }
.goal-text { font-size: 14px; margin-bottom: 8px; }
.pebbles { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.pebble { height: 10px; border-radius: 999px; background: var(--line-2); }
.pebble.filled { background: linear-gradient(90deg, var(--c1), var(--c2)); }
.sched { font-size: 13.5px; color: var(--muted); margin: 8px 0 14px; }
.kid-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kid-actions .btn { min-height: 52px; font-size: 16px; }
.kid .history { margin-top: 14px; }
.kid .history summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink-2); padding: 4px 0; }
.entries { list-style: none; padding: 0; margin: 8px 0 0; }
.entries li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.entries .e-date { color: var(--muted); font-size: 12.5px; }
.entries .e-label { min-width: 0; overflow-wrap: anywhere; }
.entries .e-amt { font-weight: 650; font-variant-numeric: tabular-nums; }
.entries .e-amt.pos { color: var(--ok); } .entries .e-amt.neg { color: var(--bad); }
.entries .e-bal { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.add-kid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 240px; border: 2px dashed var(--line-2); border-radius: var(--r-xl); background: transparent; color: var(--brand); font: 700 18px/1.2 var(--display); cursor: pointer; transition: background .2s, border-color .2s; }
.add-kid:hover { background: var(--soft); border-color: var(--c1); }
.add-kid span { font-size: 40px; line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; font-weight: 600; font-size: 14px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--c2); background: var(--soft); color: var(--brand); }
.amt { font: 750 30px/1 var(--display) !important; min-height: 60px !important; }
.emoji-row { display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-choice { width: 48px; height: 48px; border-radius: 14px; border: 1.5px solid var(--line-2); background: #fff; font-size: 26px; cursor: pointer; transition: transform .15s var(--ease); }
.emoji-choice:hover { transform: translateY(-2px); }
.emoji-choice[aria-pressed="true"] { border-color: var(--c2); background: var(--soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 16%, transparent); }
fieldset.box { border: 0; margin: 0; padding: 14px; border-radius: var(--r); background: var(--paper); display: grid; gap: 12px; }
.print-root { display: none; }
@media (max-width: 640px) { .kids { grid-template-columns: 1fr; } .fam-bar .row { width: 100%; } .fam-bar .row .btn { flex: 1 1 auto; } }
@media print {
  body > *:not(main), main > *:not(.app), .app > *:not(.print-root) { display: none !important; }
  .print-root { display: block !important; color: #000; font: 11pt/1.45 var(--body); }
  .statement-page { page-break-after: always; } .statement-page:last-child { page-break-after: auto; }
  .st-bank { font: 700 26pt/1.1 var(--display); } .st-sub { font-size: 10pt; color: #333; margin-bottom: 4pt; }
  .st-scallop { display: block; width: 100%; height: 10pt; margin: 4pt 0 10pt; }
  .st-meta { display: flex; gap: 18pt; flex-wrap: wrap; font-size: 10.5pt; margin-bottom: 10pt; }
  .st-table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
  .st-table th { text-align: left; border-bottom: 1.5pt solid #000; padding: 4pt; font-size: 9.5pt; text-transform: uppercase; letter-spacing: .04em; }
  .st-table td { padding: 3.5pt 4pt; border-bottom: .5pt solid #bbb; }
  .st-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .st-table .st-open td, .st-table .st-close td { font-weight: 700; border-bottom: 1.5pt solid #000; }
  .st-goal { margin-top: 14pt; } .st-goal-line { font-weight: 700; margin-bottom: 4pt; } .st-thermo { width: 100%; height: 16pt; } .st-goal-caption { font-size: 10.5pt; margin-top: 3pt; }
  .st-note { margin-top: 12pt; font-size: 11pt; } .st-fine { margin-top: 14pt; font-size: 8.5pt; color: #444; } .st-credit { font-size: 7.5pt; color: #666; margin-top: 4pt; }
}