:root {
 --bg: oklch(97% .013 94); --surface: oklch(99.5% .004 94); --fg: oklch(31% .045 158); --muted: oklch(47% .023 148); --border: oklch(86% .021 104); --accent: oklch(53% .074 152);
 --font-display: 'Avenir Next', 'Söhne', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
 --sage: oklch(91% .031 139); --peach: oklch(93% .033 58); --lavender: oklch(93% .022 304); --success: oklch(37% .073 150); --warn: oklch(40% .077 55); --danger: oklch(42% .13 28); --on-primary: oklch(98% .01 98); --shadow: 0 10px 30px oklch(25% .025 150 / .06);
}
:root[data-theme="dark"] { --bg: oklch(22% .018 155); --surface: oklch(26% .023 155); --fg: oklch(94% .018 98); --muted: oklch(77% .021 130); --border: oklch(43% .018 155); --accent: oklch(74% .064 150); --sage: oklch(33% .028 148); --peach: oklch(34% .025 55); --lavender: oklch(32% .022 304); --success: oklch(81% .065 145); --warn: oklch(83% .062 65); --danger: oklch(79% .09 28); --on-primary: oklch(22% .018 155); }
* { box-sizing: border-box; } body { margin: 0; background: color-mix(in oklch,var(--bg) 88%,var(--border)); color: var(--fg); font: 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; } button,input,select,textarea { font: inherit; } button,a,input,select,textarea { -webkit-tap-highlight-color: transparent; } button { cursor:pointer; color:inherit; } button:disabled { opacity:.55; cursor:not-allowed; } :focus-visible { outline:3px solid var(--fg); outline-offset:3px; } button { letter-spacing:.02em; } button,a { touch-action:manipulation; } svg { width:22px; height:22px; flex-shrink:0; } .app-shell { max-width:480px; min-height:100dvh; margin:auto; background:var(--bg); position:relative; box-shadow:0 0 80px oklch(25% .025 150 / .08); }
#app-header { padding:18px 24px 0; } .topline { display:flex; align-items:center; justify-content:space-between; gap:10px; } .brand { display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.02em; } .brand svg { width:25px; height:25px; } .sample-label { font-size:11px; letter-spacing:.025em; border:1px solid var(--border); border-radius:30px; padding:3px 8px; color:var(--muted); } .icon-button { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--border); border-radius:50%; background:var(--surface); }
#main { padding:24px 24px 115px; min-height:75dvh; outline:none; } h1,h2,h3 { font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; } h1 { font-size:32px; letter-spacing:-.025em; line-height:1.2; } h2 { font-size:20px; line-height:1.3; letter-spacing:-.015em; } h3 { font-size:17px; line-height:1.4; } p { margin:8px 0 0; } .muted { color:var(--muted); } .small { font-size:13px; line-height:1.5; letter-spacing:.01em; } .eyebrow { font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; } .page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .greeting { font-size:14px; color:var(--muted); margin-bottom:7px; } .hero { margin-top:20px; padding:20px; border:1px solid var(--border); border-radius:24px; position:relative; background:var(--sage); overflow:hidden; }
.hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; } .hero-title { font-size:22px; line-height:1.35; max-width:12ch; } .hero-art { width:100%; height:150px; object-fit:contain; display:block; margin:4px 0 10px; } .hero-bottom { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid color-mix(in oklch,var(--fg) 15%,transparent); gap:12px; } .avatars { display:flex; align-items:center; padding-left:0; } .avatar { width:34px; height:34px; background:var(--surface); border:2px solid var(--bg); border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:600; flex-shrink:0; } .avatars .avatar + .avatar { margin-left:-8px; } .avatar.peach { background:var(--peach); }.avatar.lavender { background:var(--lavender); }.avatar.sage { background:var(--sage); } .round-tag { padding:6px 11px; border-radius:30px; background:var(--surface); font-size:12px; white-space:nowrap; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:26px 0 12px; }.section-heading h2 { font-size:18px; }.text-button { min-height:48px; padding:8px 0; border:0; background:transparent; color:var(--fg); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:4px; }.text-button:hover { text-decoration-thickness:2px; } .task-list { display:grid; gap:10px; }.task { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:10px 12px; }.check { width:48px; height:48px; display:grid; place-items:center; background:transparent; border:0; border-radius:12px; }.check-mark { width:26px; height:26px; border:1.6px solid var(--muted); border-radius:50%; display:grid; place-items:center; }.check-mark svg { width:18px; height:18px; } .check.done .check-mark { background:var(--fg); color:var(--bg); border-color:var(--fg); }.check.pending .check-mark { background:var(--peach); color:var(--warn); border-color:var(--warn); }.check:hover { background:var(--sage); }.task-open { display:block; text-align:left; border:0; background:transparent; padding:4px 0; min-height:60px; width:100%; }.task-title { display:block; font-size:15px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }.task-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; font-size:12px; margin-top:5px; color:var(--muted); }.task-meta .mini-avatar { width:19px; height:19px; display:inline-grid; place-items:center; background:var(--sage); border-radius:50%; font-size:10px; }.effort { display:inline-flex; gap:3px; align-items:center; }.effort-dot { flex:0 0 5px; width:5px; min-width:5px; max-width:5px; height:5px; min-height:5px; max-height:5px; align-self:center; border-radius:50%; background:var(--fg); }.effort-dot.empty { padding:0; border:0; border-radius:50%; background:var(--border); }.status { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:550; }.status.warn { color:var(--warn); }.status.good { color:var(--success); }.status.danger { color:var(--danger); }.status svg { width:15px; height:15px; }.dot { width:5px; height:5px; border-radius:50%; background:currentColor; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 18px; border:1px solid var(--border); border-radius:15px; background:var(--surface); color:var(--fg); font-weight:600; font-size:14px; text-decoration:none; }.button.primary { background:var(--fg); color:var(--bg); border-color:var(--fg); }.button:hover { background:var(--sage); }.button.primary:hover { background:color-mix(in oklch,var(--fg) 92%,var(--bg)); color:var(--bg); }.button:active,.icon-button:active { transform:translateY(1px); }.button.wide { width:100%; }.button.danger { color:var(--danger); }.button.compact { padding:10px 12px; }.icon-button:hover { background:var(--sage); }.add-button { width:48px; height:48px; padding:0; }.stack { display:grid; gap:12px; }.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }.actions .button { flex:1; }.notice { background:var(--sage); border-radius:14px; padding:14px 16px; font-size:13px; line-height:1.55; margin:16px 0; }.notice.warn { background:var(--peach); }.notice.error { color:var(--danger); border:1px solid var(--danger); background:var(--surface); }.note-row { display:flex; gap:9px; align-items:center; font-size:12px; color:var(--muted); margin-top:16px; }
#navigation { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,480px); z-index:10; display:flex; padding:12px 10px max(18px,env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--border); gap:2px; }.nav-item { flex:1; min-width:0; min-height:54px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; border:0; background:transparent; font-size:11px; color:var(--muted); border-radius:14px; letter-spacing:.01em; }.nav-item.active { color:var(--accent); font-weight:600; }.nav-item.active svg { stroke-width:2.2; }.nav-item:hover { background:var(--sage); color:var(--fg); } .nav-item[hidden] { display:none; }
#connection:not(:empty) { margin:16px 24px 0; padding:12px; border-radius:12px; font-size:12px; background:var(--peach); display:flex; gap:8px; align-items:center; justify-content:space-between; } #connection button { padding:6px; min-height:48px; border:0; background:transparent; text-decoration:underline; color:var(--fg); font-weight:600; }
.room-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.room-card { padding:16px; background:var(--surface); border:1px solid var(--border); border-radius:20px; text-align:left; min-height:164px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:12px; }.room-card:hover { background:var(--sage); }.room-card h3 { font-size:16px; }.room-card svg { width:58px; height:58px; }.room-card:nth-child(3n+2) .room-art { background:var(--peach); }.room-card:nth-child(3n) .room-art { background:var(--lavender); }.room-art { width:78px; height:72px; display:grid; place-items:center; background:var(--sage); border-radius:16px; }.room-card p { font-size:12px; color:var(--muted); margin:4px 0 0; }.back { margin:-6px 0 18px; }.panel { padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:18px; }.panel + .panel { margin-top:12px; }.member { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--border); }.member:last-child { border:0; }.member .avatar { width:44px; height:44px; }.member-info { flex:1; min-width:0; }.member-info h3 { font-size:15px; }.member .icon-button { border:0; background:transparent; }.inline-stat { display:flex; gap:12px; align-items:baseline; }.inline-stat strong { font-size:36px; letter-spacing:-.03em; font-family:var(--font-display); font-weight:600; }.divider { height:1px; background:var(--border); margin:20px 0; }.history { list-style:none; margin:0; padding:0; }.history li { padding:14px 0; border-bottom:1px solid var(--border); }.history li:last-child { border:0; }.history-title { display:flex; justify-content:space-between; gap:12px; font-size:14px; }.history-title strong { font-weight:550; }.empty { text-align:center; padding:34px 18px; border:1px dashed var(--border); border-radius:20px; }.empty svg { width:42px; height:42px; margin-bottom:8px; }.empty p { font-size:14px; color:var(--muted); margin-bottom:18px; }.empty h2 { font-size:21px; }
.week-strip { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin:18px 0; }.day { padding:8px 0; border:0; border-radius:15px; background:transparent; min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; }.day b { font-size:18px; font-weight:550; }.day.selected { color:var(--bg); background:var(--fg); }.day:hover:not(.selected) { background:var(--sage); }.date-title { display:flex; align-items:center; justify-content:space-between; gap:8px; }.segmented { display:flex; padding:4px; background:var(--sage); border-radius:13px; margin:16px 0; }.segmented button { flex:1; min-height:48px; border:0; border-radius:10px; background:transparent; font-size:13px; }.segmented button.selected { background:var(--surface); box-shadow:var(--shadow); }.plan-row { border-bottom:1px solid var(--border); padding:14px 0; }.plan-row:last-child { border:0; }.plan-row h3 { font-size:15px; }.plan-row .small { margin-top:6px; }.budget-row { display:grid; grid-template-columns:1fr 90px; gap:12px; align-items:center; }.meter { height:8px; background:var(--border); border-radius:8px; margin-top:10px; }.meter span { display:block; height:100%; border-radius:8px; background:var(--fg); }.settings-list { display:grid; gap:2px; }.settings-row { width:100%; text-align:left; min-height:60px; padding:16px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; border-bottom:1px solid var(--border); background:transparent; }.settings-row:last-child { border-bottom:0; }.settings-row strong { display:block; font-size:14px; font-weight:550; }.settings-row span.small { display:block; margin-top:3px; }.settings-row:hover { background:var(--sage); }.switch { width:46px; height:28px; background:var(--border); border-radius:20px; position:relative; flex-shrink:0; }.switch:after { content:''; width:22px; height:22px; border-radius:50%; background:var(--surface); position:absolute; top:3px; left:3px; }.switch.on { background:var(--fg); }.switch.on:after { left:21px; background:var(--bg); }
form { display:grid; gap:17px; } label { display:block; font-size:13px; font-weight:550; }.label-hint { font-weight:400; color:var(--muted); display:block; font-size:12px; margin-top:4px; }.field { width:100%; padding:12px 13px; min-height:48px; border:1px solid var(--border); border-radius:12px; color:var(--fg); background:var(--surface); margin-top:7px; font-size:15px; }.field:focus { border-color:var(--fg); }.field[type="checkbox"] { width:22px; height:22px; min-height:22px; margin:0; accent-color:var(--fg); }.field[type="date"] { min-width:0; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.choice { display:flex; gap:12px; min-height:48px; align-items:center; border:1px solid var(--border); padding:10px 12px; border-radius:12px; font-size:14px; }.choice input { accent-color:var(--fg); width:20px; height:20px; }.choices { display:grid; gap:6px; }.error-text { font-size:13px; color:var(--danger); margin:0; } fieldset { border:0; padding:0; margin:0; min-width:0; } legend { font-size:13px; font-weight:550; margin-bottom:7px; }.code { text-align:center; font:600 30px/1.4 ui-monospace,monospace; letter-spacing:.07em; border:1px dashed var(--border); border-radius:16px; padding:22px 10px; }.hero-child { background:var(--lavender); }.achievement { display:grid; place-items:center; min-height:180px; background:var(--sage); border-radius:24px; text-align:center; padding:24px; }.achievement svg { width:52px; height:52px; margin-bottom:8px; }.achievement strong { display:block; font-size:44px; font-family:var(--font-display); letter-spacing:-.025em; line-height:1.3; }.pro-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }.pro-grid .panel { margin:0; padding:14px; }.pro-grid ul { font-size:13px; padding-left:16px; }.pro-grid li { margin:10px 0; }.onboarding-logo { display:grid; place-items:center; width:76px; height:76px; margin:20px auto 28px; border-radius:22px; background:var(--sage); }.onboarding-logo svg { width:46px; height:46px; }.onboarding { text-align:center; }.onboarding p { max-width:32ch; margin:14px auto 28px; }.onboarding .button { margin-top:10px; }.row-link { display:flex; justify-content:space-between; align-items:center; }
dialog { background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:24px; width:calc(100% - 24px); max-width:456px; max-height:88dvh; padding:0; box-shadow:0 20px 100px oklch(15% .01 150 / .25); overscroll-behavior:contain; } dialog::backdrop { background:oklch(15% .012 150 / .45); backdrop-filter:blur(3px); } #dialog-content { padding:22px; } .dialog-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }.dialog-head h2 { font-size:23px; }.dialog-head .icon-button { flex-shrink:0; border:0; background:var(--surface); }.dialog-text { font-size:14px; }.dialog-text p { margin-bottom:12px; }.form-error:empty { display:none; } #toast { position:fixed; bottom:105px; left:50%; transform:translate(-50%,12px); width:calc(100% - 40px); max-width:432px; background:var(--fg); color:var(--bg); padding:12px 16px; border-radius:14px; z-index:30; font-size:13px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transition:opacity .2s,transform .2s; } #toast.visible { opacity:1; visibility:visible; transform:translate(-50%,0); }.loading-line { min-height:80px; display:grid; place-items:center; }.spinner { width:22px; height:22px; border:2px solid var(--border); border-top-color:var(--fg); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:600px) { body { padding:26px 0; } .app-shell { border:1px solid var(--border); border-radius:30px; min-height:calc(100dvh - 52px); } #navigation { bottom:26px; border-radius:0 0 30px 30px; width:478px; } #app-header { padding-top:22px; } #toast { bottom:125px; } }
@media(max-width:375px) { #main { padding-left:18px; padding-right:18px; } #app-header { padding-left:18px; padding-right:18px; } #connection:not(:empty) { margin-left:18px; margin-right:18px; } .hero { padding:18px; } .room-card { padding:14px; } .pro-grid { gap:8px; } }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; } }

@media(max-width:375px) { .week-strip { gap:2px; } .hero-art { height:130px; } }

/* The sample switch belongs to adults; each group keeps its own local history. */
.audience-picker { margin-bottom:22px; }
.audience-label { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.audience-picker .segmented { margin:8px 0 6px; }
.audience-picker p { margin:0; }
.roommate-moment { margin-top:0; }
.roommate-moment .hero-bottom { margin-top:18px; }
.roommate-moment .avatars { gap:6px; flex-wrap:wrap; }
.hero:not(.hero-child) .hero-art { height:100px; }
.page-heading > div,.hero-top > h2,.hero-bottom > div,.row-link > div,.settings-row > span { min-width:0; }
h1,h2,h3,.history-title,.member-info,.dialog-text,.settings-row,.audience-picker p { overflow-wrap:anywhere; }
.page-heading > .icon-button { flex-shrink:0; }
.row-link { gap:12px; }
.field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.field-grid label { min-width:0; }
.audience-picker button:hover,.segmented button:hover:not(.selected),.day:hover:not(.selected) { background:var(--surface); color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg); }
.audience-picker button.selected:hover { background:var(--surface); color:var(--fg); }
.task-open:hover { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:375px) { .audience-label .small { font-size:11px; } .nav-item { font-size:10px; } .hero-bottom { flex-wrap:wrap; } }

#main[data-screen-label="today"] { padding-top:16px; }
#main[data-screen-label="today"] .audience-picker { margin-bottom:14px; }
#main[data-screen-label="today"] .page-heading { margin-bottom:12px; }
.hero-family { margin-top:12px; padding:16px; }
.hero-family .hero-title { font-size:20px; line-height:1.3; }
.hero-family .hero-top > div { min-width:0; }
.hero.hero-family .hero-art { width:100px; height:76px; margin:0; flex-shrink:0; }
.hero-family .hero-bottom { margin-top:10px; padding-top:10px; }
#main[data-screen-label="today"] > .section-heading { margin-top:18px; }
#main[data-screen-label="today"] > .segmented { margin:12px 0; }

.roommate-moment { padding:16px; }
.roommate-moment .hero-title { font-size:20px; }
.roommate-moment .hero-bottom { margin-top:10px; }