:root {
  --bg: #fff8f3;
  --surface: #fffefd;
  --surface-2: #f5eee8;
  --label: #38443e;
  --secondary: #7d7b76;
  --tertiary: #aaa7a1;
  --separator: rgba(91, 107, 98, .13);
  --blue: #56796a;
  --green: #7e9e82;
  --orange: #cf9367;
  --red: #bf6f6b;
  --pink: #c98291;
  --indigo: #817b99;
  --shadow: 0 18px 50px rgba(104, 83, 72, .09);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { background: var(--bg); touch-action:pan-x pan-y; }
body { margin: 0; min-height: 100vh; color: var(--label); background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Apple SD Gothic Neo", sans-serif; -webkit-font-smoothing: antialiased; touch-action:pan-x pan-y; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button,a { touch-action:manipulation; }
.auth-required { overflow: hidden; }
.auth-required .app-shell { visibility: hidden; }

/* iOS sign-in card */
.auth-gate { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 20% 5%, rgba(0,122,255,.13), transparent 25rem), radial-gradient(circle at 85% 90%, rgba(88,86,214,.11), transparent 24rem), var(--bg); }
.auth-panel { width: min(100%, 420px); padding: 38px 28px 30px; border-radius: 32px; background: rgba(255,255,255,.88); box-shadow: 0 24px 70px rgba(0,0,0,.12); text-align: center; backdrop-filter: saturate(180%) blur(28px); -webkit-backdrop-filter: saturate(180%) blur(28px); }
.album-kicker { display: inline-flex; align-items: center; min-height: 26px; margin-bottom: 25px; padding: 0 11px; border-radius: 999px; color: var(--blue); background: rgba(0,122,255,.1); font-size: 11px; font-weight: 700; }
.auth-illustration { display: flex; justify-content: center; align-items: center; height: 98px; margin-bottom: 25px; }
.auth-face { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 -6px; border: 4px solid white; border-radius: 24px; color: white; font-size: 13px; font-weight: 700; box-shadow: 0 10px 25px rgba(0,0,0,.13); }
.dad-face { background: linear-gradient(145deg,#34c759,#62d879); transform: rotate(-5deg); }.baby-face { z-index:1; width:91px; height:91px; background:linear-gradient(145deg,#0a84ff,#64d2ff); }.mom-face { background:linear-gradient(145deg,#ff2d55,#ff758f); transform:rotate(5deg); }
.auth-panel h1 { margin: 0 0 12px; font-size: clamp(28px,7vw,36px); font-weight: 750; line-height: 1.25; letter-spacing: -.045em; }
.auth-copy { margin: 0 0 26px; color: var(--secondary); font-size: 13px; line-height: 1.55; }
.oauth-button { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; min-height:52px; border:0; border-radius:14px; color:white; background:var(--blue); font-size:15px; font-weight:650; cursor:pointer; }.oauth-button:active { opacity:.72; }
.google-mark { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#4285f4; background:white; font-family:Arial,sans-serif; font-size:14px; font-weight:700; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:19px 0; color:var(--secondary); font-size:11px; }.auth-divider::before,.auth-divider::after { content:""; flex:1; height:.5px; background:var(--separator); }
.gate-login-form { display:grid; grid-template-columns:1fr auto; gap:8px; }.gate-login-form input { min-width:0; margin:0; }.gate-login-form button { padding:0 15px; border:0; border-radius:13px; color:var(--blue); background:rgba(0,122,255,.1); font-size:12px; font-weight:700; cursor:pointer; }
.auth-note { margin:13px 0 0; color:var(--secondary); font-size:10px; }.archive-note { display:block; margin-top:22px; color:var(--secondary); font-size:11px; }
.demo-auth-divider { margin:17px 0 12px; }
.demo-login-button { display:flex; align-items:center; justify-content:center; gap:11px; width:100%; min-height:56px; padding:9px 14px; border:1px solid rgba(86,121,106,.22); border-radius:15px; color:var(--label); background:rgba(86,121,106,.075); text-align:left; cursor:pointer; }
.demo-login-button > span:first-child { display:grid; place-items:center; flex:0 0 auto; width:27px; height:27px; border-radius:9px; color:#fff; background:var(--blue); font-size:13px; font-weight:800; }
.demo-login-button > span:last-child { display:grid; gap:2px; }
.demo-login-button strong { font-size:13px; font-weight:750; }
.demo-login-button small { color:var(--secondary); font-size:9px; line-height:1.35; }
.demo-login-button:active { transform:scale(.985); opacity:.76; }
.demo-mode-banner { position:fixed; z-index:1300; top:max(8px,env(safe-area-inset-top)); left:50%; display:flex; align-items:center; gap:10px; width:max-content; max-width:calc(100vw - 24px); min-height:38px; padding:5px 6px 5px 12px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#f8fbff; background:rgba(16,25,37,.92); box-shadow:0 9px 28px rgba(0,0,0,.24); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transform:translateX(-50%); }
.demo-mode-banner span { overflow:hidden; font-size:10px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.demo-mode-banner strong { margin-right:5px; padding:3px 6px; border-radius:999px; color:#10202b; background:#82dec5; font-size:8px; letter-spacing:.08em; }
.demo-mode-banner button { flex:0 0 auto; min-height:28px; padding:0 10px; border:0; border-radius:999px; color:#fff; background:rgba(255,255,255,.13); font-size:9px; font-weight:700; cursor:pointer; }
body.demo-mode .app-shell { padding-top:calc(max(22px,env(safe-area-inset-top)) + 44px); }
body.demo-mode .avatar-button i { background:#82dec5; }
.account-demo-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px; }
.account-demo-actions button { min-height:44px; border:0; border-radius:13px; font-size:12px; font-weight:700; cursor:pointer; }
.account-demo-actions .demo-reset-button { color:var(--blue); background:rgba(86,121,106,.11); }
.account-demo-actions .demo-exit-button { color:#fff; background:#263747; }

/* App */
.app-shell { width:min(100%,820px); margin:0 auto; padding:max(22px,env(safe-area-inset-top)) 16px 120px; }
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; padding:0 4px; }
.topbar-account-actions { display:flex; flex:0 0 auto; align-items:center; gap:10px; }
.desktop-logout-button { display:none; }
.topbar h1 { max-width:calc(100vw - 100px); font-size:clamp(25px,5.3vw,32px); line-height:1.16; }
.eyebrow { margin:0 0 4px; color:var(--secondary); font-size:11px; font-weight:600; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:clamp(28px,6vw,36px); font-weight:750; letter-spacing:-.045em; }
h2 { margin-bottom:0; font-size:22px; font-weight:720; letter-spacing:-.035em; }
.avatar-button { position:relative; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; color:white; background:linear-gradient(145deg,#28483b,#708276); font-size:15px; font-weight:700; box-shadow:0 8px 22px rgba(38,63,52,.2); cursor:pointer; }.avatar-button i { position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; border:2px solid var(--bg); border-radius:50%; background:var(--orange); }.avatar-button i.online { background:#72a57d; }
.daily-verse-card { position:relative; min-height:92px; margin:0 0 14px; padding:14px 18px 13px; overflow:hidden; border:1px solid rgba(92,73,45,.09); border-radius:24px; color:#3b352c; background:linear-gradient(145deg,#fffdf7 0%,#f0eadc 100%); box-shadow:0 13px 36px rgba(65,53,35,.075); }
.daily-verse-card::before { content:"“"; position:absolute; right:12px; bottom:-34px; color:rgba(77,91,72,.08); font-family:Georgia,serif; font-size:108px; line-height:1; }
.daily-verse-heading { position:relative; z-index:1; display:flex; align-items:center; gap:7px; }
.daily-verse-heading .verse-cross { display:grid; place-items:center; width:20px; height:20px; border-radius:7px; color:#f6f0df; background:#52665a; font-size:9px; }
.daily-verse-heading p { margin:0; color:#59645c; font-size:9px; font-weight:750; letter-spacing:.03em; }
.daily-verse-heading > span:last-child { margin-left:auto; color:#9a9284; font-size:7px; }
.daily-verse-card blockquote { position:relative; z-index:1; max-width:590px; margin:9px 0 3px; color:#2f352f; font-family:Georgia,"Apple Myungjo","Nanum Myeongjo",serif; font-size:clamp(14px,3.4vw,18px); font-weight:600; line-height:1.35; letter-spacing:-.035em; word-break:keep-all; }
.daily-verse-card cite { position:relative; z-index:1; color:#7d766a; font-size:8px; font-style:normal; font-weight:650; }
.view-tabs { display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:2px; margin-bottom:16px; border-radius:10px; background:rgba(118,118,128,.12); }.view-tab { min-height:34px; border:0; border-radius:8px; background:transparent; color:var(--label); font-size:12px; font-weight:600; cursor:pointer; }.view-tab.active { background:white; box-shadow:0 1px 4px rgba(0,0,0,.13); }

/* Today card */
.hero-card { position:relative; display:flex; justify-content:space-between; align-items:end; min-height:166px; padding:25px; margin-bottom:14px; overflow:hidden; border-radius:26px; color:white; background:linear-gradient(135deg,#28483b,#52695d); box-shadow:0 18px 44px rgba(35,63,51,.2); }.hero-card::after { content:""; position:absolute; width:180px; height:180px; right:-65px; top:-85px; border:28px solid rgba(255,255,255,.06); border-radius:50%; }.album-stamp { position:absolute; right:20px; top:18px; color:rgba(255,255,255,.65); font-size:9px; font-weight:700; letter-spacing:.1em; }.hero-card p { margin-bottom:7px; color:rgba(255,255,255,.72); font-size:12px; }.hero-card h2 { color:white; font-size:clamp(25px,5vw,33px); font-weight:720; }.family-stack { display:flex; flex-direction:column; align-items:end; gap:5px; z-index:1; }.family-chip { padding:5px 10px; border-radius:999px; color:white; background:rgba(255,255,255,.14); font-size:10px; font-weight:600; backdrop-filter:blur(10px); }.family-chip.mom { transform:translateX(-8px); }.family-chip.baby { transform:translateX(-2px); }

/* Calendar */
.calendar-card { padding:19px 12px 12px; border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }.calendar-toolbar,.month-nav,.section-heading { display:flex; align-items:center; }.calendar-toolbar { justify-content:space-between; padding:0 4px 13px; }.month-nav { gap:7px; }.month-nav h2 { min-width:116px; text-align:center; font-size:19px; }.icon-button,.today-button,.close-button { border:0; background:transparent; cursor:pointer; }.icon-button { width:32px; height:32px; border-radius:50%; color:var(--blue); font-size:25px; line-height:1; }.icon-button:active { background:rgba(0,122,255,.1); }.today-button { padding:7px 11px; border:0; border-radius:9px; color:var(--blue); background:rgba(0,122,255,.1); font-size:11px; font-weight:650; }.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }.weekdays span { padding:7px 0 9px; color:var(--secondary); text-align:center; font-size:10px; font-weight:600; }.weekdays span:first-child { color:var(--red); }.calendar-day { position:relative; display:flex; flex-direction:column; align-items:center; min-width:0; min-height:66px; padding:3px 2px 4px; overflow:hidden; border:2px solid transparent; border-radius:13px; background:transparent; cursor:pointer; text-align:center; transition:background .16s,border-color .16s,transform .16s; }.calendar-day:active { transform:scale(.96); }.calendar-day.outside { opacity:.3; }.calendar-day.selected { color:var(--blue); background:rgba(0,122,255,.09); }.calendar-day.today .day-number { color:white; background:var(--blue); font-weight:750; }.calendar-day.drop-target { z-index:2; border-color:var(--blue); background:rgba(0,122,255,.16); transform:scale(1.08); opacity:1; box-shadow:0 7px 18px rgba(0,122,255,.2); }.day-number { flex:0 0 auto; display:inline-grid; place-items:center; width:27px; height:27px; border-radius:50%; font-size:11px; font-weight:600; }.day-event-preview { display:block; width:100%; margin-top:2px; padding:3px 4px; overflow:hidden; border-radius:5px; color:#176b31; background:rgba(52,199,89,.14); font-size:8px; font-weight:700; line-height:1; text-overflow:ellipsis; white-space:nowrap; }.day-event-preview.아빠 { color:#9a5700; background:rgba(255,149,0,.15); }.day-event-preview.엄마 { color:#b30d38; background:rgba(255,45,85,.13); }.day-event-preview.도윤 { color:#08749b; background:rgba(90,200,250,.18); }.more-events { position:absolute; right:3px; bottom:2px; color:var(--secondary); font-size:7px; font-weight:700; }.calendar-help { display:flex; justify-content:center; align-items:center; gap:5px; margin:8px 0 0; padding-top:9px; border-top:.5px solid var(--separator); color:var(--secondary); font-size:9px; }.calendar-help span { color:var(--blue); font-size:13px; font-weight:700; }

/* Quick entry and agenda */
.agenda-section,.growth-section { padding:26px 2px 0; }.section-heading { justify-content:space-between; margin-bottom:12px; padding:0 4px; }.section-heading h2 { font-size:22px; }.count-badge { padding:5px 9px; border-radius:999px; color:var(--secondary); background:rgba(118,118,128,.12); font-size:10px; font-weight:600; }
.quick-add-card { margin-bottom:12px; padding:12px; border-radius:19px; background:var(--surface); box-shadow:0 4px 18px rgba(0,0,0,.055); }.quick-add-heading { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; }.quick-date-badge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:42px; height:46px; border-radius:12px; color:var(--blue); background:rgba(0,122,255,.1); line-height:1; }.quick-date-badge strong { font-size:18px; }.quick-date-badge span { margin-top:3px; font-size:8px; font-weight:700; }.quick-add-heading label { min-width:0; margin:0; }.quick-add-heading label > span { display:block; margin:0 0 3px 2px; color:var(--secondary); font-size:9px; }.quick-add-heading input { height:28px; margin:0; padding:0 2px; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:15px; font-weight:650; }.quick-add-heading input:focus { box-shadow:none; }.quick-add-heading input::placeholder { color:var(--tertiary); font-weight:500; }.quick-add-submit { min-width:54px; height:40px; border:0; border-radius:12px; color:white; background:var(--blue); font-size:12px; font-weight:700; cursor:pointer; }.quick-add-submit:active { opacity:.65; }.quick-options { display:flex; align-items:center; gap:7px; margin-top:10px; padding-top:10px; border-top:.5px solid var(--separator); }.member-chips { display:flex; flex:1; gap:5px; overflow-x:auto; scrollbar-width:none; }.member-chips::-webkit-scrollbar { display:none; }.member-chip,.quick-time-button { min-height:28px; padding:0 9px; border:0; border-radius:9px; color:var(--secondary); background:var(--surface-2); font-size:10px; font-weight:650; white-space:nowrap; cursor:pointer; }.member-chip.selected { color:white; background:var(--blue); }.quick-time-button { margin-left:auto; color:var(--blue); background:rgba(0,122,255,.09); }.quick-time-button.active { color:var(--red); background:rgba(255,59,48,.09); }.quick-time-input { width:92px; height:30px; margin:0; padding:5px 7px; font-size:10px; }
.agenda-list,.growth-list { display:grid; gap:9px; }.agenda-item,.growth-entry { border:0; border-radius:18px; background:var(--surface); box-shadow:0 3px 14px rgba(0,0,0,.045); }.agenda-item { display:grid; grid-template-columns:4px minmax(0,1fr) auto 44px; align-items:center; min-height:70px; padding:8px 6px 8px 13px; overflow:hidden; }.agenda-item .bar,.drag-ghost .bar { align-self:stretch; border-radius:4px; background:var(--green); }.agenda-item .bar.엄마,.drag-ghost .bar.엄마 { background:var(--pink); }.agenda-item .bar.아빠,.drag-ghost .bar.아빠 { background:var(--orange); }.agenda-item .bar.도윤,.drag-ghost .bar.도윤 { background:#5ac8fa; }.agenda-main { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-width:0; min-height:54px; padding:6px 10px; border:0; background:transparent; cursor:pointer; text-align:left; }.agenda-main span:first-child { min-width:0; }.agenda-main strong { display:block; margin-bottom:4px; overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.agenda-main small { display:block; overflow:hidden; color:var(--secondary); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.agenda-main .time { color:var(--secondary); font-size:11px; white-space:nowrap; }.edit-event-button { min-height:32px; padding:0 9px; border:0; border-radius:9px; color:var(--blue); background:rgba(0,122,255,.09); font-size:10px; font-weight:700; cursor:pointer; }.drag-handle { display:grid; place-items:center; align-self:stretch; width:44px; margin-left:1px; border:0; border-radius:12px; color:var(--secondary); background:transparent; font-size:22px; cursor:grab; touch-action:none; }.drag-handle:active { color:var(--blue); background:rgba(0,122,255,.09); cursor:grabbing; }.empty-state { display:grid; gap:4px; padding:24px 18px; border-radius:18px; color:var(--secondary); background:var(--surface); font-size:11px; line-height:1.55; text-align:center; }.empty-state strong { color:var(--label); font-size:13px; }

.quick-add-card { transition:box-shadow .2s,transform .2s; }.quick-add-card:focus-within { box-shadow:0 0 0 2px rgba(0,122,255,.22),0 8px 24px rgba(0,122,255,.12); transform:translateY(-1px); }

/* Growth */
.growth-hero { position:relative; display:flex; justify-content:space-between; align-items:center; min-height:166px; padding:25px; border-radius:24px; color:white; background:linear-gradient(135deg,#ff375f,#ff9f0a); box-shadow:0 12px 30px rgba(255,55,95,.18); }.growth-hero::before { content:"JOURNAL"; position:absolute; right:20px; top:18px; color:rgba(255,255,255,.7); font-size:9px; font-weight:700; letter-spacing:.12em; }.growth-hero h2 { margin-bottom:8px; color:white; font-size:clamp(26px,6vw,34px); }.growth-hero .eyebrow,.growth-hero p { color:white; }.growth-hero p { margin-bottom:0; color:rgba(255,255,255,.76); font-size:11px; }.growth-sprout { display:grid; place-items:center; width:68px; height:68px; border-radius:22px; background:rgba(255,255,255,.18); font-size:30px; backdrop-filter:blur(10px); }.growth-entry { display:grid; grid-template-columns:45px 1fr 14px; gap:13px; align-items:center; width:100%; padding:16px; cursor:pointer; text-align:left; }.growth-date { display:flex; flex-direction:column; align-items:center; padding:6px 4px; border-radius:12px; color:var(--red); background:rgba(255,59,48,.1); font-size:9px; font-weight:650; }.growth-date strong { font-size:18px; line-height:1.1; }.growth-body { min-width:0; }.growth-body i { display:block; margin-bottom:3px; color:var(--pink); font-size:9px; font-style:normal; font-weight:700; }.growth-body strong,.growth-body small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.growth-body strong { margin-bottom:3px; font-size:14px; }.growth-body small { color:var(--secondary); font-size:11px; }.growth-arrow { color:var(--tertiary); font-size:22px; }
.growth-quick-section { margin:20px 0 24px; }.growth-quick-section .section-heading { margin-bottom:10px; }.growth-quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.growth-quick-grid button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:70px; padding:10px 5px; border:0; border-radius:16px; color:var(--label); background:var(--surface); font-size:10px; font-weight:650; box-shadow:inset 0 0 0 .5px var(--separator); cursor:pointer; }.growth-quick-grid button:active { transform:scale(.97); background:var(--surface-2); }.growth-quick-grid span { font-size:22px; }.growth-entry.has-photo { grid-template-columns:58px 1fr auto; }.growth-thumbnail { width:58px; height:58px; border-radius:14px; object-fit:cover; background:var(--surface-2); }.photo-count { align-self:start; padding:5px 7px; border-radius:8px; color:var(--secondary); background:var(--surface-2); font-size:8px; white-space:nowrap; }.field-optional { float:right; color:var(--tertiary); font-size:9px; font-weight:500; }.growth-detail-group { margin:-2px 0 14px; padding:13px; border-radius:16px; background:rgba(255,255,255,.66); box-shadow:inset 0 0 0 .5px var(--separator); }.growth-detail-group[hidden] { display:none; }.growth-detail-group label { margin-bottom:0; }.field-group-title { margin:0 0 10px; color:var(--secondary); font-size:10px; font-weight:700; }.form-row.three-columns { grid-template-columns:repeat(3,1fr); }.photo-fieldset { margin:4px 0 14px; padding:0; border:0; }.photo-fieldset legend { width:100%; margin-bottom:8px; color:var(--secondary); font-size:11px; font-weight:600; }.photo-fieldset legend small { float:right; color:var(--tertiary); font-size:9px; font-weight:500; }.growth-photo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:8px; }.growth-photo-item { position:relative; aspect-ratio:1; margin:0; overflow:hidden; border-radius:13px; background:var(--surface-2); }.growth-photo-item img { width:100%; height:100%; object-fit:cover; }.growth-photo-item button { position:absolute; top:5px; right:5px; display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; color:white; background:rgba(0,0,0,.58); font-size:16px; line-height:1; cursor:pointer; }.photo-add-button { display:grid; place-items:center; min-height:48px; margin:0; border:1px dashed rgba(0,122,255,.35); border-radius:13px; color:var(--blue); background:rgba(0,122,255,.06); font-size:12px; font-weight:650; cursor:pointer; }.photo-add-button input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }.photo-help { margin:7px 2px 0; color:var(--tertiary); font-size:9px; line-height:1.45; }

/* Premium baby journal */
.growth-page-header { display:flex; justify-content:space-between; align-items:end; margin:4px 2px 16px; }.growth-page-header h2 { font-size:31px; font-weight:780; letter-spacing:-.05em; }.growth-page-header .eyebrow { color:#8b7c66; font-size:9px; font-weight:750; letter-spacing:.16em; }.add-baby-button { display:flex; align-items:center; gap:5px; min-height:38px; padding:0 13px; border:1px solid rgba(53,94,77,.18); border-radius:13px; color:var(--blue); background:rgba(255,254,250,.78); font-size:11px; font-weight:700; box-shadow:0 8px 24px rgba(34,43,38,.05); cursor:pointer; }.add-baby-button span { font-size:16px; font-weight:400; }.baby-empty-card { padding:42px 24px; border:1px solid rgba(53,94,77,.1); border-radius:28px; background:linear-gradient(155deg,#fffefa,#ece9e0); box-shadow:var(--shadow); text-align:center; }.baby-empty-mark { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 20px; border-radius:25px; color:#e8e3d7; background:#355e4d; font-family:Georgia,serif; font-size:31px; box-shadow:0 14px 30px rgba(53,94,77,.22); }.baby-empty-card h2 { margin-bottom:8px; font-size:23px; }.baby-empty-card > p:not(.eyebrow) { max-width:310px; margin:0 auto 20px; color:var(--secondary); font-size:12px; line-height:1.65; }.baby-empty-card button { min-height:46px; padding:0 19px; border:0; border-radius:14px; color:white; background:var(--blue); font-size:12px; font-weight:700; }.baby-selector { display:flex; gap:7px; margin:0 2px 11px; overflow-x:auto; }.baby-selector button { display:flex; align-items:center; gap:6px; min-height:34px; padding:0 11px 0 5px; border:1px solid var(--separator); border-radius:999px; color:var(--secondary); background:rgba(255,254,250,.7); font-size:10px; font-weight:650; white-space:nowrap; }.baby-selector button span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:white; background:#9da99f; }.baby-selector button.active { color:var(--blue); border-color:rgba(53,94,77,.28); background:var(--surface); }.baby-selector button.active span { background:var(--blue); }
.baby-profile-card { position:relative; padding:24px; overflow:hidden; border-radius:29px; color:#f8f5ed; background:linear-gradient(140deg,#263d33 0%,#426052 62%,#6f7f70 100%); box-shadow:0 20px 52px rgba(35,57,47,.24); }.baby-profile-card::after { content:""; position:absolute; right:-46px; top:-72px; width:190px; height:190px; border:32px solid rgba(255,255,255,.045); border-radius:50%; }.baby-profile-main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; }.baby-profile-copy { min-width:0; }.baby-profile-copy p { margin:0 0 3px; color:rgba(255,255,255,.58); font-size:9px; }.baby-profile-copy h2 { overflow:hidden; color:white; font-size:27px; text-overflow:ellipsis; white-space:nowrap; }.baby-profile-copy > span { display:block; margin-top:4px; color:rgba(255,255,255,.72); font-size:10px; }.baby-dday { min-width:72px; text-align:right; }.baby-dday small,.baby-dday strong { display:block; }.baby-dday small { margin-bottom:3px; color:rgba(255,255,255,.55); font-size:8px; letter-spacing:.08em; }.baby-dday strong { color:#f4d9ad; font-size:23px; letter-spacing:-.04em; }.baby-edit-button { position:relative; z-index:1; margin:14px 0 0; padding:5px 8px; border:0; border-radius:7px; color:rgba(255,255,255,.65); background:rgba(255,255,255,.08); font-size:8px; font-weight:650; }.today-care-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:22px; padding-top:17px; border-top:1px solid rgba(255,255,255,.12); }.today-care-grid article { min-width:0; }.today-care-grid span,.today-care-grid strong,.today-care-grid small { display:block; }.today-care-grid span { margin-bottom:4px; color:rgba(255,255,255,.5); font-size:8px; }.today-care-grid strong { overflow:hidden; color:white; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.today-care-grid small { margin-top:3px; overflow:hidden; color:rgba(255,255,255,.48); font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
.growth-summary-section { margin:14px 0 12px; padding:20px; border:1px solid rgba(53,94,77,.09); border-radius:26px; background:linear-gradient(145deg,rgba(255,254,250,.96),rgba(235,232,223,.88)); box-shadow:0 12px 34px rgba(34,43,38,.065); }.growth-summary-header { display:flex; justify-content:space-between; align-items:start; gap:12px; }.growth-summary-header h2 { font-size:20px; }.growth-summary-header > div:first-child > span { display:block; margin-top:5px; color:var(--secondary); font-size:9px; }.summary-period-tabs { display:grid; grid-template-columns:repeat(3,1fr); min-width:172px; padding:2px; border-radius:11px; background:rgba(118,118,128,.11); }.summary-period-tabs button { min-height:31px; padding:0 9px; border:0; border-radius:9px; color:var(--secondary); background:transparent; font-size:9px; font-weight:700; white-space:nowrap; }.summary-period-tabs button.active { color:var(--label); background:var(--surface); box-shadow:0 2px 7px rgba(34,43,38,.12); }.growth-summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:17px; }.summary-card { min-width:0; min-height:91px; padding:14px 12px; border:1px solid rgba(53,94,77,.075); border-radius:18px; background:rgba(255,254,250,.88); }.summary-card span,.summary-card strong,.summary-card small { display:block; }.summary-card span { margin-bottom:9px; color:var(--secondary); font-size:8px; }.summary-card strong { overflow:hidden; color:var(--label); font-size:19px; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }.summary-card small { margin-top:6px; overflow:hidden; color:var(--tertiary); font-size:7px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }.summary-card.feed { border-top:3px solid #b78968; }.summary-card.sleep { border-top:3px solid #7d7792; }.summary-card.diaper { border-top:3px solid #8a846c; }.summary-card.all { border-top:3px solid #638174; }.growth-summary-footer { margin:13px 2px 0; color:#7c766b; font-size:8px; text-align:right; }
.growth-insight-row { display:grid; grid-template-columns:1.55fr repeat(3,.65fr); gap:8px; margin:12px 0 25px; }.growth-insight-row > article,.insight-title { min-height:83px; padding:14px; border:1px solid rgba(53,94,77,.09); border-radius:19px; background:var(--surface); box-shadow:0 8px 26px rgba(34,43,38,.045); }.insight-title strong,.insight-title span { display:block; }.insight-title strong { margin-bottom:6px; font-size:13px; }.insight-title span { color:var(--secondary); font-size:9px; }.growth-insight-row > article span { display:block; margin-bottom:11px; color:var(--secondary); font-size:8px; }.growth-insight-row > article strong { font-size:18px; letter-spacing:-.04em; }.growth-insight-row > article strong small { margin-left:2px; color:var(--secondary); font-size:8px; font-weight:600; }.growth-insight-empty { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding:17px 18px!important; }.growth-insight-empty strong,.growth-insight-empty span { display:block; }.growth-insight-empty strong { margin-bottom:4px; font-size:13px; }.growth-insight-empty span { margin:0!important; color:var(--secondary); font-size:9px; }.growth-insight-empty button { flex:0 0 auto; min-height:34px; padding:0 11px; border:0; border-radius:10px; color:white; background:var(--blue); font-size:9px; font-weight:700; }
.recent-photo-section { margin:0 2px 26px; }.recent-photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.recent-photo-grid button { position:relative; aspect-ratio:1; padding:0; overflow:hidden; border:0; border-radius:17px; background:var(--surface-2); box-shadow:0 8px 24px rgba(34,43,38,.08); }.recent-photo-grid img { width:100%; height:100%; object-fit:cover; }.recent-photo-grid span { position:absolute; right:6px; bottom:6px; padding:3px 6px; border-radius:6px; color:white; background:rgba(25,31,27,.55); font-size:7px; backdrop-filter:blur(8px); }.growth-quick-section { margin-top:0; }.growth-quick-grid { gap:8px; }.growth-quick-grid button { min-height:82px; border:1px solid rgba(53,94,77,.08); border-radius:19px; box-shadow:0 9px 28px rgba(34,43,38,.05); }.growth-quick-grid .quick-symbol { display:grid; place-items:center; width:34px; height:34px; border-radius:12px; color:#355e4d; background:#e4e9e3; font-family:Georgia,serif; font-size:11px; font-weight:700; }.quick-symbol.sleep { color:#665f7a; background:#e7e4ed; }.quick-symbol.diaper { color:#8b6744; background:#eee4d6; }.quick-symbol.health { color:#9b5b58; background:#f0dfdc; }.quick-symbol.measure { color:#54717a; background:#dfeaec; }.quick-symbol.moment { color:#8a7447; background:#eee8d5; }
.growth-filter-bar { display:flex; gap:6px; margin:0 0 12px; overflow-x:auto; scrollbar-width:none; }.growth-filter-bar button { min-height:31px; padding:0 11px; border:1px solid var(--separator); border-radius:999px; color:var(--secondary); background:transparent; font-size:9px; font-weight:650; white-space:nowrap; }.growth-filter-bar button.active { color:white; border-color:var(--blue); background:var(--blue); }.growth-entry { border:1px solid rgba(53,94,77,.07); border-radius:20px; box-shadow:0 9px 28px rgba(34,43,38,.045); }.growth-thumbnail { border-radius:15px; }.growth-body i { color:#8b7254; letter-spacing:.02em; }.photo-count { display:flex; flex-direction:column; align-items:end; gap:2px; color:var(--tertiary); background:transparent; text-transform:uppercase; }.photo-count b { color:var(--label); font-size:12px; }.premium-empty { min-height:130px; align-content:center; border:1px dashed var(--separator); background:var(--surface); }.form-privacy-note { margin:-4px 2px 12px; color:var(--tertiary); font-size:9px; }
.quick-log-copy { margin:-8px 2px 17px; color:var(--secondary); font-size:11px; line-height:1.55; }.quick-preset-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.quick-preset-grid button { display:flex; flex-direction:column; justify-content:center; min-height:72px; padding:12px 14px; border:1px solid rgba(53,94,77,.1); border-radius:18px; background:var(--surface); text-align:left; box-shadow:0 8px 25px rgba(34,43,38,.045); }.quick-preset-grid button:active { color:white; background:var(--blue); transform:scale(.98); }.quick-preset-grid button:disabled { opacity:.5; }.quick-preset-grid span { margin-bottom:5px; font-size:16px; font-weight:740; }.quick-preset-grid small { color:var(--secondary); font-size:9px; }.quick-preset-grid button:active small { color:rgba(255,255,255,.65); }.quick-detail-button { width:100%; min-height:45px; margin-top:11px; border:0; border-radius:14px; color:var(--blue); background:rgba(53,94,77,.08); font-size:11px; font-weight:700; }

/* iOS controls and sheets */
.fab { position:fixed; z-index:5; left:50%; bottom:max(20px,env(safe-area-inset-bottom)); transform:translateX(-50%); padding:14px 20px; border:0; border-radius:16px; color:white; background:var(--blue); font-size:13px; font-weight:650; box-shadow:0 10px 28px rgba(0,122,255,.3); cursor:pointer; }.fab span { font-size:17px; vertical-align:-1px; }
.sheet-dialog { width:min(calc(100% - 16px),520px); max-height:calc(100vh - 12px); margin:auto auto 6px; padding:0; overflow:auto; border:0; border-radius:32px; color:var(--label); background:#f7f7fa; box-shadow:0 30px 90px rgba(0,0,0,.28); }.sheet-dialog::backdrop { background:rgba(0,0,0,.36); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }.sheet-dialog form,.sheet-panel { padding:10px 18px 25px; }.sheet-handle { position:sticky; z-index:1; top:0; width:38px; height:5px; margin:0 auto 20px; border-radius:99px; background:#c7c7cc; }.dialog-header { display:flex; justify-content:space-between; align-items:start; margin-bottom:20px; padding:0 2px; }.close-button { width:36px; height:36px; border-radius:50%; color:var(--secondary); background:rgba(118,118,128,.12); font-size:22px; } label { display:block; margin-bottom:14px; color:var(--secondary); font-size:11px; font-weight:600; } input,select,textarea { width:100%; margin-top:7px; padding:13px 14px; border:0; border-radius:12px; outline:none; color:var(--label); background:var(--surface); font-size:14px; box-shadow:inset 0 0 0 .5px var(--separator); } input:focus,select:focus,textarea:focus { box-shadow:inset 0 0 0 1.5px var(--blue); } textarea { resize:vertical; }.title-field input { min-height:52px; font-size:17px; font-weight:650; }.date-shortcuts { display:flex; gap:7px; margin:-2px 0 14px; }.date-shortcuts button { min-height:31px; padding:0 11px; border:0; border-radius:9px; color:var(--blue); background:rgba(0,122,255,.09); font-size:10px; font-weight:650; cursor:pointer; }.date-shortcuts button.active { color:white; background:var(--blue); }.all-day-row { display:flex; justify-content:space-between; align-items:center; min-height:60px; margin:0 0 14px; padding:10px 13px; border-radius:14px; background:var(--surface); box-shadow:inset 0 0 0 .5px var(--separator); }.all-day-row > span { display:grid; gap:3px; }.all-day-row strong { font-size:13px; }.all-day-row small { color:var(--secondary); font-size:9px; }.ios-switch { position:relative; width:51px; height:31px; margin:0; }.ios-switch input { position:absolute; width:1px; height:1px; opacity:0; }.ios-switch span { position:absolute; inset:0; border-radius:999px; background:#e5e5ea; transition:.2s; }.ios-switch span::after { content:""; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(0,0,0,.22); transition:.2s; }.ios-switch input:checked + span { background:var(--green); }.ios-switch input:checked + span::after { transform:translateX(20px); }.member-fieldset { margin:0 0 14px; padding:0; border:0; }.member-fieldset legend { margin-bottom:7px; color:var(--secondary); font-size:11px; font-weight:600; }.member-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }.member-selector button { display:flex; justify-content:center; align-items:center; gap:5px; min-height:42px; padding:0 7px; border:1px solid transparent; border-radius:12px; color:var(--secondary); background:var(--surface); font-size:11px; font-weight:650; cursor:pointer; box-shadow:inset 0 0 0 .5px var(--separator); }.member-selector button i { width:7px; height:7px; border-radius:50%; background:var(--green); }.member-selector button[data-member="아빠"] i { background:var(--orange); }.member-selector button[data-member="엄마"] i { background:var(--pink); }.member-selector button[data-member="도윤"] i { background:#5ac8fa; }.member-selector button.selected { border-color:var(--blue); color:var(--blue); background:rgba(0,122,255,.08); box-shadow:none; }.form-row { display:grid; grid-template-columns:1.2fr .8fr; gap:9px; }.dialog-actions { position:sticky; bottom:0; display:flex; gap:9px; margin:20px -2px -8px; padding:10px 2px 8px; background:linear-gradient(transparent,#f7f7fa 20%); }.dialog-actions button { min-height:50px; border:0; border-radius:14px; font-size:14px; font-weight:650; cursor:pointer; }.primary-button { flex:1; color:white; background:var(--blue); }.danger-button { display:none; padding:0 17px; color:var(--red); background:rgba(255,59,48,.1); }.danger-button.visible { display:block; }
.account-card { padding:18px; margin-bottom:12px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 .5px var(--separator); }.account-card p { margin-bottom:9px; color:var(--secondary); font-size:12px; line-height:1.6; }.account-card strong { font-size:16px; }.account-form { display:grid; gap:9px; }.account-form input { margin:0; background:var(--surface-2); }.account-form button,.secondary-button { padding:13px; border:0; border-radius:13px; color:white; background:var(--blue); font-size:13px; font-weight:650; }.secondary-button { color:var(--blue); background:rgba(0,122,255,.1); }.invite-code { color:var(--blue); font-size:25px; font-weight:700; letter-spacing:.12em; }
.range-toggle-row { display:flex; justify-content:space-between; align-items:center; min-height:60px; margin:0 0 12px; padding:10px 13px; border-radius:14px; background:var(--surface); box-shadow:inset 0 0 0 .5px var(--separator); }.range-toggle-row > span { display:grid; gap:3px; }.range-toggle-row strong { font-size:13px; }.range-toggle-row small { color:var(--secondary); font-size:9px; }.event-date-fields { display:grid; grid-template-columns:1fr; gap:9px; }.event-date-fields.has-range { grid-template-columns:1fr 1fr; }.event-date-fields label { min-width:0; }.day-event-preview.spans-range::before { content:"↔ "; }.event-when { display:grid; justify-items:end; gap:3px; white-space:nowrap; }.event-when b { color:var(--blue); font-size:8px; }.event-when small { color:var(--secondary); font-size:11px; }
.dragging-event { user-select:none; cursor:grabbing; }.dragging-event .calendar-day { border-color:rgba(0,122,255,.18); }.drag-ghost { position:fixed; z-index:100; top:0; left:0; display:grid; grid-template-columns:4px minmax(0,1fr); gap:10px; align-items:center; width:216px; min-height:58px; padding:10px 13px; border-radius:15px; color:var(--label); background:rgba(255,255,255,.94); box-shadow:0 16px 42px rgba(0,0,0,.22); opacity:0; pointer-events:none; transition:opacity .12s; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }.drag-ghost.show { opacity:.96; }.drag-ghost strong,.drag-ghost small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.drag-ghost strong { font-size:13px; }.drag-ghost small { margin-top:3px; color:var(--secondary); font-size:9px; }.toast { position:fixed; z-index:110; left:50%; bottom:92px; display:flex; align-items:center; gap:13px; max-width:calc(100% - 28px); transform:translate(-50%,20px); padding:11px 13px 11px 15px; border-radius:13px; color:white; background:rgba(30,30,30,.92); font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; transition:.2s; backdrop-filter:blur(12px); }.toast button { padding:5px 8px; border:0; border-radius:7px; color:#64d2ff; background:rgba(255,255,255,.1); font-size:10px; font-weight:700; pointer-events:auto; }.toast.show { opacity:1; pointer-events:auto; transform:translate(-50%,0); }

@media (min-width:700px) { .app-shell { padding-left:28px; padding-right:28px; }.calendar-day { min-height:80px; }.day-event-preview { padding:4px 5px; font-size:9px; }.sheet-dialog { margin:auto; }.agenda-list,.growth-list { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .calendar-day { min-height:61px; }.calendar-help { font-size:8px; }.agenda-main { padding-left:9px; padding-right:7px; }.quick-options { flex-wrap:wrap; }.member-chips { min-width:220px; }.quick-time-input { margin-left:auto; }.sheet-dialog { max-height:calc(100dvh - 8px); } }
@media (max-width:390px) { .auth-panel { padding:33px 20px 27px; border-radius:28px; }.gate-login-form { grid-template-columns:1fr; }.gate-login-form button { min-height:46px; }.hero-card,.growth-hero { padding:23px 21px; }.family-stack { display:none; }.calendar-day { min-height:57px; padding-left:1px; padding-right:1px; }.calendar-card { padding-left:7px; padding-right:7px; }.day-number { width:25px; height:25px; }.day-event-preview { padding-left:2px; padding-right:2px; font-size:7px; }.growth-sprout { width:58px; height:58px; font-size:27px; }.sheet-dialog { width:calc(100% - 8px); border-radius:28px; }.quick-add-card { padding:10px; }.quick-add-heading { grid-template-columns:39px minmax(0,1fr) 50px; gap:8px; }.quick-date-badge { width:39px; }.member-selector { gap:4px; }.member-selector button { padding:0 4px; }.date-shortcuts button { flex:1; padding:0 6px; }.form-row.three-columns { grid-template-columns:1fr; } }
@media (max-width:520px) { .baby-profile-card { padding:21px 18px; }.baby-profile-main { grid-template-columns:minmax(0,1fr) auto; gap:11px; }.baby-profile-copy h2 { font-size:24px; }.baby-dday { min-width:62px; }.baby-dday strong { font-size:20px; }.today-care-grid { gap:4px; }.today-care-grid strong { font-size:13px; }.growth-insight-row { grid-template-columns:repeat(3,1fr); }.insight-title { grid-column:1/-1; min-height:auto; }.recent-photo-grid { grid-template-columns:repeat(3,1fr); }.quick-preset-grid button { min-height:68px; } }
@media (max-width:520px) { .growth-summary-section { padding:17px 14px; }.growth-summary-header { align-items:stretch; flex-direction:column; }.summary-period-tabs { width:100%; min-width:0; }.growth-summary-grid { grid-template-columns:repeat(2,1fr); }.summary-card { min-height:88px; }.growth-summary-footer { text-align:left; } }

/* Family member color system */
.day-event-preview { color:var(--member-color,var(--green)); background:color-mix(in srgb,var(--member-color,var(--green)) 15%,transparent); }
.agenda-item .bar,.drag-ghost .bar { background:var(--member-color,var(--green)); }
.agenda-main .member-dot { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--member-color,var(--green)); vertical-align:1px; }
.member-chip { display:inline-flex; align-items:center; gap:5px; border:1px solid color-mix(in srgb,var(--member-color,var(--green)) 24%,transparent); color:var(--member-color,var(--green)); background:color-mix(in srgb,var(--member-color,var(--green)) 9%,var(--surface)); }
.member-chip i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.member-chip.selected { color:white; border-color:var(--member-color,var(--green)); background:var(--member-color,var(--green)); }
.member-add-chip { min-height:28px; padding:0 10px; border:1px dashed var(--separator); border-radius:9px; color:var(--blue); background:transparent; font-size:10px; font-weight:700; white-space:nowrap; cursor:pointer; }
.member-selector { grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); }
.member-selector button[data-member] i { background:var(--member-color,var(--green)); }
.member-selector button.selected { border-color:var(--member-color,var(--green)); color:var(--member-color,var(--green)); background:color-mix(in srgb,var(--member-color,var(--green)) 11%,var(--surface)); }
.member-selector .member-selector-add { border-style:dashed; color:var(--blue); background:transparent; }
.member-selector .member-selector-add i { display:grid; place-items:center; width:17px; height:17px; color:white; background:var(--blue); font-style:normal; font-size:13px; }
.member-dialog-copy { margin:-8px 2px 20px; color:var(--secondary); font-size:11px; line-height:1.55; }
.color-fieldset { margin:0 0 22px; padding:0; border:0; }
.color-fieldset legend { margin-bottom:10px; color:var(--secondary); font-size:11px; font-weight:600; }
.member-color-palette { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.color-choice { display:grid; place-items:center; aspect-ratio:1; min-width:0; padding:0; border:2px solid transparent; border-radius:50%; background:transparent; cursor:pointer; }
.color-choice i { width:28px; height:28px; border:3px solid white; border-radius:50%; background:var(--choice-color); box-shadow:0 2px 8px rgba(0,0,0,.13); }
.color-choice.selected { border-color:var(--choice-color); }
.member-submit-button { width:100%; min-height:50px; border:0; border-radius:14px; font-size:14px; font-weight:700; cursor:pointer; }
@media (max-width:390px) { .member-color-palette { grid-template-columns:repeat(4,1fr); }.member-selector { grid-template-columns:repeat(2,1fr); } }
.family-chip.dad { background:rgba(181,125,75,.72); }
.family-chip.mom { background:rgba(165,109,120,.76); }
.family-chip.baby { background:rgba(75,145,168,.78); }

/* Collapsible care summary */
.growth-summary-header { align-items:center; }
.growth-summary-toggle { display:flex; align-items:center; gap:7px; min-height:36px; padding:0 11px; border:1px solid rgba(53,94,77,.12); border-radius:12px; color:var(--blue); background:rgba(255,254,250,.72); font-size:9px; font-weight:750; cursor:pointer; }
.growth-summary-toggle i { font-size:15px; font-style:normal; line-height:1; transition:transform .2s; }
.growth-summary-toggle[aria-expanded="true"] i { transform:rotate(180deg); }
.growth-summary-body { margin-top:16px; padding-top:14px; border-top:1px solid rgba(53,94,77,.09); }
.growth-summary-body .summary-period-tabs { width:min(100%,240px); margin-left:auto; }
@media (max-width:520px) { .growth-summary-header { align-items:center; flex-direction:row; }.growth-summary-toggle { flex:0 0 auto; }.growth-summary-body .summary-period-tabs { width:100%; min-width:0; } }

/* Cute animated family theme */
@keyframes soft-rise { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes mascot-float { 0%,100% { transform:translateY(0) rotate(-.4deg); } 50% { transform:translateY(-6px) rotate(.5deg); } }
@keyframes sparkle { 0%,100% { opacity:.45; transform:scale(.82) rotate(-8deg); } 50% { opacity:1; transform:scale(1.12) rotate(8deg); } }
@keyframes soft-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(126,158,130,.22); } 50% { box-shadow:0 0 0 7px rgba(126,158,130,0); } }
@keyframes fab-float { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,-4px); } }
body::before,body::after { content:""; position:fixed; z-index:0; width:320px; height:320px; border-radius:50%; pointer-events:none; filter:blur(2px); opacity:.5; }
body::before { left:-180px; top:10vh; background:radial-gradient(circle,rgba(246,196,177,.42),rgba(246,196,177,0) 68%); animation:mascot-float 9s ease-in-out infinite; }
body::after { right:-190px; bottom:8vh; background:radial-gradient(circle,rgba(191,204,232,.34),rgba(191,204,232,0) 68%); animation:mascot-float 11s ease-in-out infinite reverse; }
.app-shell { position:relative; z-index:1; }
.topbar .eyebrow::before { content:"✦ "; color:#d19a78; animation:sparkle 2.8s ease-in-out infinite; }
.topbar .eyebrow::after { content:"  ♡"; color:#c98291; }
.topbar h1 { color:#536f62; background:linear-gradient(105deg,#466a5b 0%,#78927c 52%,#bd7887 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.avatar-button { border:3px solid rgba(255,255,255,.88); background:linear-gradient(145deg,#7a9b83,#df9d92); box-shadow:0 9px 24px rgba(164,111,105,.2); animation:mascot-float 5.8s ease-in-out infinite; }
.auth-gate { background:radial-gradient(circle at 12% 8%,rgba(246,192,170,.3),transparent 24rem),radial-gradient(circle at 90% 92%,rgba(177,192,224,.28),transparent 24rem),var(--bg); }
.auth-panel { border:1px solid rgba(217,168,148,.16); background:rgba(255,253,249,.9); box-shadow:0 26px 72px rgba(115,86,72,.14); }
.auth-illustration { height:190px; margin-bottom:13px; }
.auth-family-mascot { width:min(100%,270px); height:210px; object-fit:contain; animation:mascot-float 5.2s ease-in-out infinite; filter:drop-shadow(0 13px 18px rgba(108,75,61,.12)); }
.album-kicker { color:#6f766c; background:#f6e7df; }
.daily-verse-card { background:linear-gradient(145deg,#fffdf8 0%,#f8e9dd 56%,#eee9f5 100%); box-shadow:0 14px 38px rgba(142,101,82,.1); animation:soft-rise .22s ease both; }
.daily-verse-card::after { content:"✦"; position:absolute; right:38px; top:13px; color:rgba(201,130,145,.52); font-size:13px; animation:sparkle 2.4s ease-in-out infinite; }
.daily-verse-heading .verse-cross { background:linear-gradient(145deg,#6f8e78,#d0978a); box-shadow:0 5px 12px rgba(134,97,83,.18); animation:sparkle 3.4s ease-in-out infinite; }
.view-tabs { border:1px solid rgba(201,130,145,.08); background:linear-gradient(90deg,rgba(241,221,214,.74),rgba(225,231,220,.7)); animation:soft-rise .22s ease both; }
.view-tab.active { color:#4f6f60; background:rgba(255,254,253,.94); box-shadow:0 3px 9px rgba(118,88,75,.11); }
.hero-card { min-height:178px; background:linear-gradient(135deg,#668678 0%,#8ea28d 55%,#d5a19b 100%); box-shadow:0 18px 44px rgba(103,126,109,.24); animation:soft-rise .22s .02s ease both; }
.hero-card::before { content:"♡  ✦"; position:absolute; left:47%; top:18px; color:rgba(255,255,255,.56); font-size:16px; letter-spacing:10px; animation:sparkle 3.2s ease-in-out infinite; }
.hero-card > div:first-of-type { position:relative; z-index:3; max-width:55%; }
.family-mascot { position:absolute; z-index:2; right:-2px; bottom:-6px; width:clamp(158px,32vw,232px); max-height:174px; object-fit:contain; object-position:right bottom; pointer-events:none; filter:drop-shadow(0 12px 16px rgba(54,47,42,.16)); animation:mascot-float 5.4s ease-in-out infinite; }
.hero-card .family-stack { position:absolute; z-index:4; right:13px; bottom:9px; flex-direction:row; gap:4px; }
.hero-card .family-chip { padding:4px 7px; border:1px solid rgba(255,255,255,.2); background:rgba(72,77,69,.35); font-size:8px; box-shadow:0 3px 9px rgba(0,0,0,.09); transform:none; }
.calendar-card,.quick-add-card,.agenda-item,.growth-entry { border:1px solid rgba(201,130,145,.07); background:rgba(255,254,253,.92); box-shadow:0 10px 30px rgba(118,89,76,.07); }
.calendar-card { animation:soft-rise .22s .04s ease both; }
.calendar-day.today .day-number { background:linear-gradient(145deg,#6e917b,#d1968c); animation:soft-pulse 2.5s ease-out infinite; }
.calendar-day.selected { color:#56796a; background:linear-gradient(145deg,rgba(224,237,225,.82),rgba(249,225,218,.72)); }
.quick-date-badge { color:#9c665f; background:linear-gradient(145deg,#fae6dc,#eee8f4); }
.quick-add-submit,.primary-button,.oauth-button { background:linear-gradient(135deg,#648875,#86a286); box-shadow:0 8px 20px rgba(86,121,106,.17); }
.baby-profile-card { background:linear-gradient(140deg,#587567 0%,#7f9581 58%,#d09e94 100%); }
.baby-profile-card::before { content:"✦  ♡"; position:absolute; z-index:1; right:21px; bottom:18px; color:rgba(255,255,255,.28); font-size:14px; letter-spacing:8px; animation:sparkle 3.6s ease-in-out infinite; }
.growth-title-with-mascot { display:flex; align-items:center; gap:12px; min-width:0; }
.growth-diary-mascot { position:relative; display:block; width:92px; height:62px; flex:0 0 92px; border:1px solid rgba(217,157,146,.2); border-radius:22px 22px 22px 9px; background:linear-gradient(145deg,rgba(255,247,232,.95),rgba(247,222,218,.88)); box-shadow:0 9px 24px rgba(151,105,95,.12); animation:mascot-float 5.2s ease-in-out infinite; }
.growth-diary-mascot::after { content:""; position:absolute; left:10px; bottom:-7px; width:15px; height:15px; border-radius:2px; background:#f8e5dd; transform:rotate(45deg); }
.growth-diary-mascot img { position:absolute; z-index:1; inset:-15px -4px 2px; width:100px; height:76px; object-fit:contain; filter:drop-shadow(0 6px 8px rgba(104,75,65,.1)); }
.growth-diary-mascot i { position:absolute; z-index:2; right:5px; top:5px; padding:3px 5px; border-radius:999px; color:#a46e66; background:rgba(255,255,255,.82); font-size:7px; font-style:normal; font-weight:800; letter-spacing:-.03em; animation:sparkle 3.2s ease-in-out infinite; }
.growth-summary-section { background:linear-gradient(145deg,rgba(255,253,248,.97),rgba(246,230,220,.88),rgba(235,235,246,.78)); }
.growth-quick-grid button,.summary-card,.growth-insight-row > article,.insight-title { transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.growth-quick-grid .quick-symbol { border-radius:50%; box-shadow:0 5px 12px rgba(112,91,78,.08); transition:transform .22s ease; }
.growth-quick-grid button:active .quick-symbol { transform:rotate(-8deg) scale(1.12); }
.growth-entry,.agenda-item { animation:soft-rise .2s ease both; }
.fab { border:2px solid rgba(255,255,255,.68); border-radius:999px; background:linear-gradient(135deg,#628472,#d28f8a); box-shadow:0 12px 30px rgba(170,107,103,.28); animation:fab-float 3.8s ease-in-out infinite; }
@media (hover:hover) { .calendar-day:hover { transform:translateY(-2px) scale(1.03); background:rgba(247,229,221,.7); }.growth-quick-grid button:hover,.summary-card:hover,.growth-insight-row > article:hover,.agenda-item:hover,.growth-entry:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(130,94,80,.12); }.growth-quick-grid button:hover .quick-symbol { transform:rotate(-6deg) scale(1.08); } }
@media (max-width:390px) { .hero-card .family-stack { display:none; }.family-mascot { right:-10px; width:158px; opacity:.96; }.hero-card > div:first-of-type { max-width:58%; }.hero-card h2 { font-size:23px; } }
@media (max-width:420px) { .growth-page-header { align-items:center; }.growth-title-with-mascot { gap:7px; }.growth-diary-mascot { width:72px; height:55px; flex-basis:72px; border-radius:19px 19px 19px 8px; }.growth-diary-mascot img { inset:-12px -8px 0; width:86px; height:66px; }.growth-diary-mascot i { display:none; }.add-baby-button { padding:0 10px; }.growth-page-header h2 { font-size:27px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }

/* Keep mobile forms from triggering Safari's focus zoom. */
@media (max-width:820px) { input,select,textarea { font-size:var(--type-body-size); } }

/* Refined unified growth diary */
.baby-care-card { margin-bottom:14px; padding:0; color:#fffaf4; background:linear-gradient(145deg,#4f7061 0%,#728b78 48%,#d39f95 100%); box-shadow:0 20px 48px rgba(69,91,80,.2); }
.baby-care-card::before { top:20px; right:18px; bottom:auto; }
.baby-care-card .baby-profile-main { padding:23px 22px 0; }
.baby-care-card .baby-edit-button { margin:12px 0 0 22px; }
.care-snapshot-heading { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; margin:17px 20px 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.14); }
.care-snapshot-heading div,.care-snapshot-heading span,.care-snapshot-heading small { display:block; }
.care-snapshot-heading span { color:white; font-size:11px; font-weight:780; }
.care-snapshot-heading small { margin-top:3px; color:rgba(255,255,255,.52); font-size:8px; }
.care-snapshot-heading i { padding:4px 7px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#ffe7c7; background:rgba(255,255,255,.08); font-size:7px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.baby-care-card .today-care-grid { gap:7px; margin:9px 15px 0; padding:0; border:0; }
.baby-care-card .today-care-grid article { min-height:68px; padding:11px 9px; border:1px solid rgba(255,255,255,.11); border-radius:15px; background:rgba(255,255,255,.09); backdrop-filter:blur(8px); }
.baby-care-card .today-care-grid span { color:rgba(255,255,255,.58); }
.baby-care-card .today-care-grid strong { margin-top:7px; color:white; font-size:16px; }
.baby-care-card .today-care-grid small { color:rgba(255,255,255,.5); }
.integrated-care-summary { position:relative; z-index:2; margin:14px 12px 12px; padding:14px 15px; border:1px solid rgba(255,255,255,.68); border-radius:21px; color:var(--label); background:linear-gradient(145deg,rgba(255,253,248,.97),rgba(248,235,229,.94)); box-shadow:0 10px 28px rgba(53,70,62,.13); }
.integrated-care-summary .growth-summary-header { align-items:center; }
.integrated-care-summary .growth-summary-header h2 { color:var(--label); font-size:15px; letter-spacing:-.025em; }
.integrated-care-summary .growth-summary-header .eyebrow { margin-bottom:3px; color:#a06f66; font-size:7px; }
.integrated-care-summary .growth-summary-header > div:first-child > span { margin-top:3px; color:var(--secondary); font-size:8px; }
.integrated-care-summary .growth-summary-toggle { min-height:34px; border:0; color:#6d8579; background:rgba(102,136,119,.1); box-shadow:inset 0 0 0 1px rgba(102,136,119,.08); }
.integrated-care-summary .growth-summary-body { margin-top:13px; padding-top:12px; }
.integrated-care-summary .summary-period-tabs { margin:0 0 0 auto; background:rgba(112,126,118,.1); }
.integrated-care-summary .growth-summary-grid { gap:7px; margin-top:12px; }
.integrated-care-summary .summary-card { min-height:82px; padding:12px 10px; border:0; border-top:3px solid transparent; border-radius:15px; background:rgba(255,255,255,.8); box-shadow:0 5px 15px rgba(93,74,65,.06); }
.integrated-care-summary .summary-card strong { font-size:17px; }
.integrated-care-summary .growth-summary-footer { margin-top:10px; }
.growth-quick-section { margin:14px 0 24px; padding:19px; border:1px solid rgba(194,139,128,.12); border-radius:27px; background:linear-gradient(145deg,rgba(255,254,251,.98),rgba(249,233,225,.83)); box-shadow:0 14px 38px rgba(123,87,73,.085); }
.growth-quick-section .section-heading { align-items:start; margin-bottom:14px; }
.growth-quick-section .section-heading h2 { margin-top:2px; font-size:21px; letter-spacing:-.04em; }
.growth-quick-section .section-heading small { display:block; margin-top:5px; color:var(--secondary); font-size:9px; }
.quick-now-badge { padding:6px 9px; border-radius:999px; color:#9c6860; background:#f8dfd7; font-size:8px; font-weight:780; white-space:nowrap; }
.growth-quick-section .growth-quick-grid { grid-template-columns:repeat(3,1fr); gap:9px; }
.growth-quick-section .growth-quick-grid button { min-height:86px; border:1px solid rgba(113,98,88,.07); border-radius:20px; background:rgba(255,255,255,.8); box-shadow:0 8px 20px rgba(109,81,69,.055); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.growth-quick-section .growth-quick-grid button:nth-child(1) { background:linear-gradient(145deg,#fff9ef,#f8e9d2); }
.growth-quick-section .growth-quick-grid button:nth-child(2) { background:linear-gradient(145deg,#fbf9ff,#eae6f2); }
.growth-quick-section .growth-quick-grid button:nth-child(3) { background:linear-gradient(145deg,#fffaf2,#eee4d5); }
.growth-quick-section .growth-quick-grid button:active { transform:scale(.96); box-shadow:0 3px 10px rgba(109,81,69,.06); }
.growth-quick-section .growth-quick-grid .quick-symbol { width:38px; height:38px; box-shadow:0 5px 12px rgba(92,72,61,.08); }
.growth-insight-row { margin:0 0 25px; }
.growth-section { padding-top:2px; }
.growth-section > .section-heading { margin-bottom:12px; }
.growth-section > .section-heading h2,.recent-photo-section .section-heading h2 { font-size:21px; letter-spacing:-.035em; }
.growth-filter-bar { padding-bottom:2px; }
.growth-filter-bar button { min-height:34px; padding:0 13px; background:rgba(255,255,255,.56); }
.growth-filter-bar button.active { border-color:#6d8a7b; background:#6d8a7b; box-shadow:0 6px 14px rgba(92,125,108,.16); }
@media (max-width:520px) { .baby-care-card .baby-profile-main { padding:21px 18px 0; }.baby-care-card .baby-edit-button { margin-left:18px; }.baby-care-card .today-care-grid { grid-template-columns:repeat(2,1fr); margin-left:14px; margin-right:14px; }.baby-care-card .today-care-grid article { min-height:62px; }.integrated-care-summary { margin:12px 10px 10px; padding:13px; }.integrated-care-summary .growth-summary-header { align-items:center; flex-direction:row; }.integrated-care-summary .growth-summary-grid { grid-template-columns:repeat(2,1fr); }.growth-quick-section { padding:17px 14px; }.growth-quick-section .growth-quick-grid { gap:7px; }.growth-quick-section .growth-quick-grid button { min-height:82px; }.quick-now-badge { padding:5px 7px; } }
@media (max-width:360px) { .growth-quick-section .growth-quick-grid { grid-template-columns:repeat(2,1fr); }.integrated-care-summary .growth-summary-header h2 { font-size:14px; } }

/* Bulk calendar entry */
.bulk-add-button { min-height:28px; padding:0 9px; border:0; border-radius:9px; color:#76699a; background:rgba(118,105,154,.1); font-size:10px; font-weight:720; white-space:nowrap; cursor:pointer; }
.bulk-event-dialog form { padding-bottom:max(25px,env(safe-area-inset-bottom)); }
.bulk-dialog-copy { margin:-8px 2px 18px; color:var(--secondary); font-size:11px; line-height:1.55; }
.bulk-defaults { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.bulk-text-label textarea { min-height:184px; line-height:1.65; resize:vertical; }
.bulk-format-help { display:grid; gap:5px; margin:-2px 0 14px; padding:12px 13px; border-radius:14px; color:var(--secondary); background:rgba(118,105,154,.065); font-size:9px; line-height:1.45; }
.bulk-format-help strong { color:#665c85; font-size:10px; }
.bulk-format-help code { padding:2px 4px; border-radius:5px; color:#665c85; background:rgba(118,105,154,.1); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:8px; }
.bulk-preview { min-height:48px; }
.bulk-preview-empty { display:grid; place-items:center; min-height:48px; margin:0; border:1px dashed var(--separator); border-radius:13px; color:var(--tertiary); font-size:9px; }
.bulk-errors { display:grid; gap:5px; margin-bottom:9px; padding:10px 12px; border-radius:12px; color:var(--red); background:rgba(181,85,78,.08); font-size:9px; }
.bulk-errors p { margin:0; }
.bulk-preview-list { display:grid; gap:6px; }
.bulk-preview-list article { display:grid; grid-template-columns:4px minmax(0,1fr); gap:9px; align-items:stretch; min-height:47px; padding:8px 10px; border-radius:13px; background:var(--surface); box-shadow:inset 0 0 0 .5px var(--separator); }
.bulk-preview-list article > i { border-radius:99px; background:var(--member-color,var(--green)); }
.bulk-preview-list strong,.bulk-preview-list small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bulk-preview-list strong { font-size:11px; }
.bulk-preview-list small { margin-top:4px; color:var(--secondary); font-size:8px; }
.bulk-preview-list > p { margin:2px 0 0; color:var(--secondary); font-size:9px; text-align:center; }
.bulk-dialog-actions { margin-top:14px; }
.bulk-cancel-button { padding:0 18px; color:var(--secondary); background:rgba(118,118,128,.1); }
.bulk-dialog-actions .primary-button:disabled { opacity:.42; cursor:not-allowed; }
@media (max-width:390px) { .bulk-defaults { grid-template-columns:1fr; }.bulk-text-label textarea { min-height:164px; } }

/* Stable mobile sheets and properly bounded native fields */
.sheet-dialog,.sheet-dialog form,.sheet-panel,.form-row,.form-row > label { min-width:0; }
.form-row { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); }
.form-row input,.form-row select { min-width:0; max-width:100%; }
#growthDialog .growth-when-row { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
#growthDialog input[type="date"],#growthDialog input[type="time"] { display:block; width:100%; min-width:0; max-width:100%; height:54px; padding:0 12px; color-scheme:light; overflow:hidden; font-variant-numeric:tabular-nums; }
#growthDialog input[type="date"]::-webkit-date-and-time-value,#growthDialog input[type="time"]::-webkit-date-and-time-value { min-width:0; margin:0; text-align:left; }
#growthDialog .growth-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#growthDialog .growth-photo-item { min-width:0; }
@media (max-width:620px) {
  html:has(.sheet-dialog[open]),body:has(.sheet-dialog[open]) { overflow:hidden; overscroll-behavior:none; }
  .sheet-dialog { position:fixed; inset:auto 0 max(4px,env(safe-area-inset-bottom)); width:min(calc(100% - 10px),520px); max-height:calc(100dvh - max(10px,env(safe-area-inset-top))); margin:0 auto; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border-radius:30px 30px 26px 26px; }
  .sheet-dialog form,.sheet-panel { width:100%; overflow-x:clip; padding-right:16px; padding-left:16px; }
  #growthDialog .dialog-header { margin-bottom:18px; }
  #growthDialog .growth-when-row { gap:10px; }
  #growthDialog .growth-when-row > label { width:100%; min-width:0; }
  #growthDialog .growth-when-row input { font-size:var(--type-body-size); }
  #growthDialog .photo-fieldset { margin-bottom:4px; }
  #growthDialog .growth-photo-grid { gap:7px; }
  #growthDialog .dialog-actions { z-index:8; bottom:0; margin:18px -16px -25px; padding:12px 16px max(12px,env(safe-area-inset-bottom)); border-top:1px solid rgba(91,107,98,.1); background:rgba(247,247,250,.96); box-shadow:0 -10px 28px rgba(70,67,63,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
  #growthDialog .dialog-actions button { min-height:54px; }
}
@media (max-width:350px) { #growthDialog .growth-when-row { grid-template-columns:1fr; gap:0; } }

/* Save confirmation and duplicate-submit guard */
#growthSubmitButton:disabled { opacity:.72; cursor:wait; }
.completion-dialog { width:min(calc(100% - 34px),360px); margin:auto; padding:0; overflow:hidden; border:0; border-radius:28px; color:var(--label); background:transparent; box-shadow:0 26px 80px rgba(48,54,50,.28); }
.completion-dialog::backdrop { background:rgba(43,47,44,.38); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.completion-panel { padding:30px 24px 22px; background:linear-gradient(155deg,#fffefa,#f8e8e0); text-align:center; }
.completion-check { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 17px; border-radius:22px; color:white; background:linear-gradient(145deg,#638473,#86a087); font-size:29px; font-weight:800; box-shadow:0 12px 28px rgba(91,127,108,.24); animation:soft-rise .3s ease both; }
.completion-panel .eyebrow { margin-bottom:5px; color:#a16f67; font-size:8px; }
.completion-panel h2 { margin-bottom:8px; font-size:25px; letter-spacing:-.045em; }
.completion-panel > p:not(.eyebrow) { color:var(--secondary); font-size:11px; line-height:1.55; }
.completion-panel button { width:100%; min-height:50px; margin-top:21px; border:0; border-radius:16px; color:white; background:linear-gradient(135deg,#648875,#86a286); font-size:14px; font-weight:760; box-shadow:0 9px 22px rgba(86,121,106,.18); }

/* Calendar tap interaction */
.calendar-day { touch-action:manipulation; }
.agenda-heading-actions { display:flex; align-items:center; gap:7px; }
.agenda-heading-actions .bulk-add-button { min-height:30px; padding:0 10px; border:1px solid rgba(118,105,154,.12); }

/* Full-screen recent photo viewer */
.photo-viewer-dialog { width:min(calc(100% - 24px),760px); max-width:none; max-height:calc(100dvh - 24px); margin:auto; padding:0; overflow:visible; border:0; color:white; background:transparent; }
.photo-viewer-dialog::backdrop { background:rgba(22,24,23,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.photo-viewer-panel { position:relative; display:grid; gap:13px; width:100%; max-height:calc(100dvh - 24px); }
.photo-viewer-panel figure { display:grid; gap:11px; min-width:0; margin:0; }
.photo-viewer-panel img { display:block; width:100%; max-height:calc(100dvh - 150px); border-radius:24px; background:#1e211f; box-shadow:0 24px 70px rgba(0,0,0,.34); object-fit:contain; touch-action:pinch-zoom; }
.photo-viewer-panel figcaption { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:0 4px; }
.photo-viewer-panel figcaption strong { overflow:hidden; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.photo-viewer-panel figcaption span { flex:0 0 auto; color:rgba(255,255,255,.58); font-size:9px; }
.photo-viewer-close { position:absolute; z-index:2; top:10px; right:10px; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:white; background:rgba(26,29,27,.62); font-size:26px; line-height:1; backdrop-filter:blur(10px); }
.photo-share-button { justify-self:center; min-width:160px; min-height:48px; padding:0 22px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#263a31; background:#f9f4eb; font-size:13px; font-weight:780; box-shadow:0 10px 28px rgba(0,0,0,.24); }
.photo-share-button span { margin-right:5px; font-size:18px; }
.photo-share-button:disabled { opacity:.68; }
@media (max-width:520px) { .photo-viewer-dialog { width:100%; max-height:100dvh; padding:12px 10px max(12px,env(safe-area-inset-bottom)); }.photo-viewer-panel { max-height:calc(100dvh - 24px); }.photo-viewer-panel img { max-height:calc(100dvh - 168px); border-radius:20px; }.photo-viewer-panel figcaption { align-items:start; flex-direction:column; gap:4px; padding:0 6px; }.photo-viewer-close { top:21px; right:19px; }.photo-share-button { width:calc(100% - 12px); } }

/* TimeTree-style spanning event bars and horizontal month swipe */
.calendar-card { overflow:hidden; }
.calendar-grid { position:relative; grid-auto-rows:minmax(70px,auto); gap:0; touch-action:pan-y; will-change:transform,opacity; }
.calendar-day { align-self:stretch; justify-self:stretch; height:100%; }
.calendar-event-bar { appearance:none; -webkit-appearance:none; z-index:3; display:block; align-self:start; justify-self:stretch; box-sizing:border-box; width:auto; min-width:0; max-width:none; min-height:0; height:16px; margin:var(--event-top) 2px 4px; padding:0 6px; overflow:hidden; border:0; border-radius:5px; color:#fff; background-color:var(--member-color,var(--green)); font:760 8px/16px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; text-align:center; white-space:nowrap; cursor:pointer; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.24); }
.calendar-event-bar span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.calendar-event-bar.range-event { box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28),0 2px 5px color-mix(in srgb,var(--member-color) 18%,transparent); }
.calendar-day.public-holiday-day:not(.today) .day-number { color:#d94c5c; font-weight:780; }
.calendar-event-bar.public-holiday-event { background-color:#d94c5c; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.28); cursor:default; }
.holiday-agenda-item { grid-template-columns:4px minmax(0,1fr); border-color:rgba(217,76,92,.14); background:rgba(255,248,249,.94); }
.holiday-agenda-item .bar { background:#d94c5c; }
.holiday-agenda-item .agenda-main { cursor:default; }
.holiday-agenda-item .member-dot { background:#d94c5c; }
.calendar-overflow-badge { z-index:3; align-self:start; justify-self:end; min-width:20px; height:14px; margin:var(--event-top) 3px 4px; padding:0 4px; border-radius:5px; color:var(--secondary); background:var(--surface-2); font-size:7px; font-weight:800; line-height:14px; text-align:center; pointer-events:none; }
.dragging-event .calendar-event-bar { pointer-events:none; }
@media (min-width:700px) { .calendar-event-bar { height:18px; font-size:9px; line-height:18px; } }

/* Growth diary album */
.recent-photo-section { margin:30px 2px 8px; padding-top:24px; border-top:1px solid rgba(91,107,98,.11); }
.recent-photo-actions { display:flex; align-items:center; gap:7px; }
.recent-photo-actions button { display:flex; align-items:center; gap:4px; min-height:32px; padding:0 10px; border:1px solid rgba(86,121,106,.12); border-radius:999px; color:var(--blue); background:rgba(255,255,255,.72); font-size:9px; font-weight:760; }
.recent-photo-actions button i { font-size:16px; font-style:normal; line-height:1; }
.recent-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.photo-album-view { min-height:70vh; animation:soft-rise .28s ease both; }
.album-open > .growth-page-header { display:none; }
.photo-album-header { display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:13px; align-items:center; margin:2px 0 24px; padding:18px; border:1px solid rgba(194,139,128,.12); border-radius:27px; background:linear-gradient(145deg,#fffdf8,#f6e5df); box-shadow:0 14px 38px rgba(123,87,73,.08); }
.photo-album-back { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(86,121,106,.12); border-radius:15px; color:var(--blue); background:rgba(255,255,255,.8); font-size:29px; line-height:1; }
.photo-album-header h2 { margin:2px 0 4px; font-size:25px; letter-spacing:-.045em; }
.photo-album-header > div > span { color:var(--secondary); font-size:9px; }
.photo-album-header > strong { padding:6px 9px; border-radius:999px; color:#9a6962; background:#f8ddd5; font-size:9px; }
.photo-album-content { display:grid; gap:28px; }
.photo-album-month { display:flex; justify-content:space-between; align-items:center; margin:0 3px 10px; }
.photo-album-month h3 { font-size:16px; letter-spacing:-.035em; }
.photo-album-month span { color:var(--secondary); font-size:9px; }
.photo-album-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.photo-album-grid button { position:relative; min-width:0; aspect-ratio:1; padding:0; overflow:hidden; border:0; border-radius:18px; background:var(--surface-2); box-shadow:0 8px 24px rgba(77,63,55,.08); }
.photo-album-grid img { width:100%; height:100%; object-fit:cover; transition:transform .22s ease; }
.photo-album-grid button:active img { transform:scale(.97); }
.photo-album-grid button > span { position:absolute; right:0; bottom:0; left:0; padding:18px 8px 7px; overflow:hidden; color:white; background:linear-gradient(transparent,rgba(22,25,23,.62)); font-size:7px; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.photo-album-grid button > span strong { margin-right:4px; font-size:8px; }
.photo-album-empty { padding:50px 20px; border:1px dashed var(--separator); border-radius:24px; color:var(--secondary); text-align:center; }
@media (max-width:520px) { .recent-photo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }.recent-photo-grid button { border-radius:14px; }.photo-album-header { grid-template-columns:42px minmax(0,1fr) auto; padding:15px 13px; }.photo-album-header h2 { font-size:22px; }.photo-album-header > div > span { display:none; }.photo-album-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }.photo-album-grid button { border-radius:14px; } }

/* One-hand care timers and weekly care rhythm */
.care-timer-card { position:relative; margin:14px 0 18px; padding:20px; overflow:hidden; border:1px solid rgba(100,132,116,.14); border-radius:27px; background:linear-gradient(145deg,#fffef9,#edf3ed); box-shadow:0 14px 38px rgba(75,103,88,.09); }
.care-timer-card::after { content:""; position:absolute; right:-44px; top:-54px; width:140px; height:140px; border-radius:50%; background:rgba(232,195,151,.16); pointer-events:none; }
.care-timer-heading,.care-pattern-heading { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.care-timer-heading h2,.care-pattern-heading h2 { margin:2px 0 4px; font-size:21px; letter-spacing:-.04em; }
.care-timer-heading small,.care-pattern-heading small { display:block; color:var(--secondary); font-size:9px; line-height:1.45; }
.care-live-badge { display:flex; align-items:center; gap:5px; padding:6px 9px; border-radius:999px; color:#4e7561; background:rgba(98,132,113,.1); font-size:8px; font-weight:800; white-space:nowrap; }
.care-live-badge i { width:6px; height:6px; border-radius:50%; background:#7e9e88; box-shadow:0 0 0 4px rgba(126,158,136,.12); }
.care-timer-starts { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:15px; }
.care-timer-starts button { min-width:0; min-height:94px; padding:13px 8px; border:1px solid rgba(80,111,95,.09); border-radius:20px; color:var(--label); background:rgba(255,255,255,.82); box-shadow:0 7px 20px rgba(63,91,76,.055); touch-action:manipulation; }
.care-timer-starts button:active { transform:scale(.96); background:#fff; }
.care-timer-starts strong,.care-timer-starts small { display:block; }
.care-timer-starts strong { margin-top:7px; font-size:11px; }
.care-timer-starts small { margin-top:4px; color:var(--secondary); font-size:7px; }
.timer-start-icon { display:grid; place-items:center; width:38px; height:38px; margin:auto; border-radius:14px; color:#6f5d42; background:#f3e4c9; font-family:Georgia,serif; font-size:13px; font-weight:800; }
.timer-start-icon.sleep { color:#625a79; background:#e8e4f1; }
.care-timer-running { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; margin-top:15px; padding:16px; border-radius:21px; color:white; background:linear-gradient(135deg,#527461,#76947e); box-shadow:0 12px 28px rgba(67,104,83,.22); }
.care-timer-running[hidden],.care-timer-starts[hidden] { display:none; }
.care-timer-status { display:flex; min-width:0; align-items:center; gap:12px; }
.care-timer-status > span { display:grid; flex:0 0 auto; place-items:center; width:46px; height:46px; border-radius:16px; color:#42634f; background:#fff6e7; font-family:Georgia,serif; font-size:14px; font-weight:800; }
.care-timer-status div { min-width:0; }
.care-timer-status small,.care-timer-status strong,.care-timer-status time,.care-timer-status em { display:block; }
.care-timer-status small { color:rgba(255,255,255,.58); font-size:7px; }
.care-timer-status strong { margin:3px 0 1px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.care-timer-status time { font-size:24px; font-weight:820; letter-spacing:.025em; font-variant-numeric:tabular-nums; }
.care-timer-status em { margin-top:2px; color:rgba(255,255,255,.58); font-size:7px; font-style:normal; }
.care-timer-actions { display:grid; grid-template-columns:auto auto; gap:6px; min-width:132px; }
.care-timer-actions button { min-height:36px; padding:0 10px; border:1px solid rgba(255,255,255,.25); border-radius:12px; font-size:8px; font-weight:800; white-space:nowrap; }
.care-timer-actions .care-timer-stop { grid-column:1/-1; min-height:48px; color:#345142; background:#fff8ee; font-size:10px; }
.care-timer-actions .care-timer-stop span { margin-right:4px; color:#c47d72; font-size:8px; }
.care-timer-actions .care-timer-switch { color:white; background:rgba(255,255,255,.12); }
.care-timer-actions .care-timer-cancel { color:rgba(255,255,255,.72); background:transparent; }
.care-timer-actions .care-timer-switch[hidden] { display:none; }
.care-timer-actions .care-timer-switch[hidden] + .care-timer-stop { grid-column:1/-1; }
.care-timer-actions button:disabled { opacity:.7; }
.care-timer-card.is-running .care-live-badge { color:#fff3da; background:#638670; }
.care-timer-card.is-running .care-live-badge i { background:#ffd49f; box-shadow:0 0 0 4px rgba(255,212,159,.17); animation:pulse-dot 1.6s ease-in-out infinite; }

.care-pattern-section { margin:0 0 23px; padding:20px; border:1px solid rgba(105,102,130,.1); border-radius:27px; background:linear-gradient(145deg,rgba(255,254,251,.98),rgba(240,237,246,.86)); box-shadow:0 14px 38px rgba(90,81,115,.075); }
.care-rhythm-legend { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding-top:4px; }
.care-rhythm-legend span { display:flex; align-items:center; gap:4px; color:var(--secondary); font-size:7px; white-space:nowrap; }
.care-rhythm-legend span::before { content:""; width:7px; height:7px; border-radius:3px; background:var(--legend); }
.care-rhythm-legend .feed { --legend:#d7a66b; }.care-rhythm-legend .sleep { --legend:#8d84ad; }.care-rhythm-legend .diaper { --legend:#719886; }.care-rhythm-legend .health { --legend:var(--theme-care-health); }
.care-pattern-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:16px; padding:3px; border-radius:15px; background:rgba(102,105,129,.085); }
.care-pattern-tabs button { min-height:35px; padding:0 8px; border:0; border-radius:12px; color:var(--secondary); background:transparent; font-size:9px; font-weight:750; }
.care-pattern-tabs button.active { color:#536b60; background:#fff; box-shadow:0 3px 12px rgba(72,73,87,.1); }
.care-pattern-categories { display:flex; gap:7px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
.care-pattern-categories::-webkit-scrollbar { display:none; }
.care-pattern-categories button { display:flex; flex:0 0 auto; align-items:center; gap:6px; min-height:38px; padding:0 11px 0 6px; border:1px solid rgba(90,96,115,.1); border-radius:999px; color:var(--secondary); background:rgba(255,255,255,.58); font-size:8px; font-weight:750; opacity:.48; }
.care-pattern-categories button i { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:white; background:var(--category-color); font-family:Georgia,serif; font-size:8px; font-style:normal; }
.care-pattern-categories button.feed { --category-color:#d7a66b; }.care-pattern-categories button.sleep { --category-color:#8d84ad; }.care-pattern-categories button.diaper { --category-color:#719886; }.care-pattern-categories button.health { --category-color:var(--theme-care-health); }
.care-pattern-categories button.active { color:var(--label); border-color:color-mix(in srgb,var(--category-color) 28%,transparent); background:white; opacity:1; box-shadow:0 5px 14px rgba(80,76,96,.07); }
.care-pattern-date { display:grid; grid-template-columns:42px 1fr 42px; gap:8px; align-items:center; margin:5px auto 0; padding:7px; border:1px solid rgba(89,102,96,.07); border-radius:16px; background:rgba(255,255,255,.62); }
.care-pattern-date[hidden] { display:none; }
.care-pattern-date button { width:42px; height:38px; padding:0; border:0; border-radius:12px; color:#60796d; background:rgba(100,132,116,.08); font-size:24px; }
.care-pattern-date button:disabled { color:var(--tertiary); opacity:.38; }
.care-pattern-date strong { color:#4f635a; font-size:10px; font-weight:780; text-align:center; }
.care-pattern-content { min-height:160px; margin-top:6px; }
.care-clock-wrap { position:relative; width:min(100%,390px); margin:0 auto; padding:2px 0 0; }
.care-clock { display:block; width:100%; overflow:visible; }
.care-clock-outer { fill:#fbfaf7; stroke:rgba(91,101,96,.08); stroke-width:1; filter:drop-shadow(0 13px 24px rgba(70,75,71,.08)); }
.care-clock-face { fill:none; stroke:#f0efec; stroke-width:45; }
.care-clock-night { fill:none; stroke:#e7e9ef; stroke-width:45; opacity:.72; }
.care-clock-hour { fill:#a4abb3; font-size:9px; font-weight:780; font-variant-numeric:tabular-nums; }
.care-clock-tick { stroke:#d8dce0; stroke-width:1.5; stroke-linecap:round; }.care-clock-tick.major { stroke:#aeb6bd; stroke-width:2.5; }
.care-clock-mark { stroke-width:7; stroke-linecap:round; filter:drop-shadow(0 2px 3px rgba(58,62,59,.08)); }
.care-clock-mark.feed { stroke:#ef9b76; }.care-clock-mark.diaper { stroke:#69a18a; }.care-clock-mark.health { stroke:var(--theme-care-health); }
.care-clock-dot.feed { fill:#ef9b76; }.care-clock-dot.diaper { fill:#69a18a; }.care-clock-dot.health { fill:var(--theme-care-health); }
.care-clock-sleep { fill:none; stroke:#8d84ad; stroke-width:15; stroke-linecap:round; opacity:.92; filter:drop-shadow(0 2px 3px rgba(83,74,118,.13)); }
.care-clock-now { stroke:#c4a56d; stroke-width:1.5; stroke-dasharray:3 3; opacity:.85; }.care-clock-now-dot { fill:#c4a56d; }
.care-clock-center { fill:#fffefb; stroke:rgba(96,106,120,.06); stroke-width:1; filter:url(#clockCenterShadow); }
.care-clock-center-kicker { fill:#8d948e; font-size:9px; font-weight:780; }
.care-clock-center-day { fill:#4f6d5e; font-size:25px; font-weight:840; letter-spacing:-.03em; }
.care-clock-center-caption { fill:#b0b5b1; font-size:7px; font-weight:680; }
.care-clock-periods { position:absolute; inset:18% auto 18% 50%; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; transform:translateX(-50%); }
.care-clock-periods span { padding:3px 6px; border-radius:999px; color:#a3a8ae; background:rgba(255,255,255,.8); font-size:6px; font-weight:750; box-shadow:0 2px 8px rgba(70,75,71,.05); }
.care-clock-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:-3px 3px 10px; overflow:hidden; border:1px solid rgba(90,96,115,.07); border-radius:17px; background:rgba(255,255,255,.7); }
.care-clock-summary article { display:grid; grid-template-columns:7px 1fr; grid-template-rows:auto auto; column-gap:6px; align-items:center; min-width:0; padding:11px 9px; text-align:left; }
.care-clock-summary article + article { border-left:1px solid rgba(90,96,115,.07); }
.care-clock-summary i { grid-row:1/3; width:7px; height:25px; border-radius:99px; background:var(--summary-color); }
.care-clock-summary span,.care-clock-summary strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.care-clock-summary span { color:var(--secondary); font-size:7px; }.care-clock-summary strong { margin-top:2px; color:var(--label); font-size:11px; }
.care-clock-summary .feed { --summary-color:#ef9b76; }.care-clock-summary .sleep { --summary-color:#8d84ad; }.care-clock-summary .diaper { --summary-color:#69a18a; }.care-clock-summary .health { --summary-color:var(--theme-care-health); }
.care-rhythm-chart { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; min-height:148px; margin-top:17px; }
.care-rhythm-day { display:grid; grid-template-rows:1fr auto auto; gap:2px; min-width:0; text-align:center; }
.care-rhythm-bars { display:flex; height:105px; align-items:flex-end; justify-content:center; gap:3px; padding:8px 4px 5px; border-radius:13px; background:rgba(255,255,255,.63); }
.care-rhythm-bars i { width:min(8px,28%); height:var(--bar); min-height:4px; border-radius:5px 5px 3px 3px; background:var(--bar-color); transition:height .35s ease; }
.care-rhythm-bars .feed { --bar-color:#d7a66b; }.care-rhythm-bars .sleep { --bar-color:#8d84ad; }.care-rhythm-bars .diaper { --bar-color:#719886; }.care-rhythm-bars .health { --bar-color:var(--theme-care-health); }
.care-rhythm-day strong { margin-top:4px; color:var(--secondary); font-size:8px; }
.care-rhythm-day span { color:var(--tertiary); font-size:7px; }
.care-rhythm-day.today .care-rhythm-bars { box-shadow:inset 0 0 0 1px rgba(97,131,113,.24); background:#fffdf7; }
.care-rhythm-day.today strong { color:#547663; }
.care-rhythm-empty { grid-column:1/-1; display:grid; place-content:center; gap:5px; min-height:130px; border:1px dashed rgba(105,102,130,.15); border-radius:18px; color:var(--secondary); text-align:center; }
.care-rhythm-empty strong { color:var(--label); font-size:11px; }.care-rhythm-empty span { font-size:8px; }
.care-interval-grid { display:grid; gap:8px; margin-top:15px; }
.care-interval-card { position:relative; padding:14px 15px; overflow:hidden; border-radius:17px; background:rgba(255,255,255,.78); box-shadow:inset 0 0 0 1px rgba(89,95,114,.06); }
.care-interval-card span,.care-interval-card strong,.care-interval-card small { display:block; }.care-interval-card span { color:var(--secondary); font-size:8px; }.care-interval-card strong { margin:5px 0 4px; color:var(--interval-color); font-size:20px; letter-spacing:-.035em; }.care-interval-card small { color:var(--tertiary); font-size:7px; }
.care-interval-card > div { height:4px; margin-top:11px; overflow:hidden; border-radius:999px; background:rgba(90,96,115,.07); }.care-interval-card > div i { display:block; width:var(--progress); height:100%; border-radius:inherit; background:var(--interval-color); }
.care-interval-card.feed { --interval-color:#d09a5a; }.care-interval-card.sleep { --interval-color:#837aa5; }.care-interval-card.diaper { --interval-color:#638c78; }.care-interval-card.health { --interval-color:var(--theme-care-health); }
.care-pattern-note { margin:10px 0 0; color:var(--tertiary); font-size:8px; text-align:center; }
.recent-photo-featured { margin:14px 0 18px; padding:18px; border:1px solid rgba(194,139,128,.11); border-radius:25px; background:linear-gradient(145deg,#fffefb,#f7eee9); box-shadow:0 12px 32px rgba(123,87,73,.07); }
.recent-photo-featured .section-heading { margin-bottom:12px; }
@keyframes pulse-dot { 50% { transform:scale(.72); opacity:.65; } }
@media (max-width:520px) {
  .care-timer-card,.care-pattern-section { padding:17px 14px; }
  .care-timer-starts { gap:6px; }
  .care-timer-starts button { min-height:90px; padding-right:4px; padding-left:4px; }
  .care-timer-running { grid-template-columns:1fr; padding:14px; }
  .care-timer-actions { grid-template-columns:1fr 1fr; width:100%; }
  .care-timer-actions .care-timer-stop { min-height:50px; }
  .care-pattern-heading { display:block; }
  .care-rhythm-legend { justify-content:flex-start; margin-top:9px; }
  .care-clock-wrap { width:min(100%,350px); }
  .care-rhythm-chart { gap:4px; }
  .care-rhythm-bars { gap:2px; padding-right:3px; padding-left:3px; }
}
@media (max-width:350px) { .care-timer-starts { grid-template-columns:1fr; }.care-timer-starts button { display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; min-height:68px; text-align:left; }.timer-start-icon { grid-row:1/3; margin:0; }.care-timer-starts strong { margin-top:2px; }.care-timer-starts small { margin-top:0; } }