:root {
  --ink: #242727;
  --muted: #858982;
  --paper: #f7f5ef;
  --card: #fffdfa;
  --green: #5f8476;
  --green-dark: #3f675a;
  --mint: #dcebe5;
  --peach: #f1cdb8;
  --blue: #cbdde1;
  --lavender: #d8d4e8;
  --line: #eae6dc;
  --shadow: 0 12px 35px rgba(57, 66, 60, .09);
}
* { box-sizing: border-box; }
body { margin: 0; background: #e9ece8; color: var(--ink); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { width: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { position: relative; width: min(100%, 430px); min-height: 100vh; margin: 0 auto; background: var(--paper); overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,.12); }
.topbar { height: 78px; padding: 18px 20px 10px; display: flex; align-items: center; justify-content: space-between; }
.baby-switch { border: 0; background: none; display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; }
.baby-switch .avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: #d8e5d9; font-weight: 800; color: var(--green-dark); }
.baby-switch b,.baby-switch small { display: block; }.baby-switch b { font-size: 15px; }.baby-switch small { margin-top: 3px; font-size: 11px; color: var(--muted); }
.baby-switch svg { width: 16px; margin-left: 2px; color: #9a9d97; }
.icon-button,.calendar-button { position: relative; border: 0; width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: #fff; }
.icon-button i { position: absolute; right: 8px; top: 8px; width: 7px; height: 7px; border: 2px solid var(--paper); border-radius: 50%; background: #e28e73; }
.page { display: none; padding: 4px 20px 100px; animation: pageIn .25s ease; }
.page.active { display: block; } @keyframes pageIn { from { opacity: 0; transform: translateY(4px); } }
.date-row { display: flex; justify-content: space-between; align-items: flex-end; margin: 9px 0 20px; }
.date-row span,.subpage-header small { color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
h1 { margin: 5px 0 0; font-size: 26px; letter-spacing: -.6px; }
.calendar-button { background: #ebe8df; }
.ai-card { position: relative; min-height: 190px; padding: 22px 20px; border-radius: 28px; background: linear-gradient(135deg, #496d62, #769487); color: white; overflow: hidden; box-shadow: 0 16px 36px rgba(63,103,90,.24); }
.ai-card:after { content:""; position:absolute; width:180px; height:180px; right:-62px; top:-63px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow: 0 0 0 25px rgba(255,255,255,.035),0 0 0 55px rgba(255,255,255,.025); }
.ai-copy { position: relative; z-index: 2; width: 72%; }.eyebrow { font-size: 11px; font-weight: 700; opacity: .8; }.eyebrow i { display:inline-block; width:6px;height:6px;margin-right:6px;border-radius:50%;background:#b8e0c9;box-shadow:0 0 0 4px rgba(184,224,201,.13); }
.ai-card h2 { margin: 14px 0 7px; font-size: 21px; }.ai-card p { margin:0; font-size:12px; line-height:1.55; opacity:.75; }
.listen-button { margin-top: 19px; border: 0; padding: 11px 16px; border-radius: 13px; background: #fff; color: var(--green-dark); font-size: 12px; font-weight: 800; display:flex; align-items:center; gap:7px; }.listen-button svg {width:17px;}
.ai-orb { position:absolute; right:22px; top:50px; width:72px; height:72px; display:flex;align-items:center;justify-content:center;gap:3px; z-index:2; }
.ai-orb:before { content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.12);box-shadow:inset 0 0 25px rgba(255,255,255,.13); }
.ai-orb span { position:relative;width:3px;border-radius:4px;background:#fff;animation:wave 1.1s ease-in-out infinite; }.ai-orb span:nth-child(1),.ai-orb span:nth-child(5){height:13px}.ai-orb span:nth-child(2),.ai-orb span:nth-child(4){height:27px;animation-delay:.12s}.ai-orb span:nth-child(3){height:38px;animation-delay:.24s}
@keyframes wave { 50% { transform:scaleY(.45);opacity:.6; } }
.section-title { display:flex;align-items:center;justify-content:space-between;margin:25px 2px 14px; }.section-title h3 {margin:0;font-size:17px}.section-title button {border:0;background:none;color:var(--green);font-size:12px;font-weight:700}.section-title span{font-size:11px;color:var(--muted)}
.quick-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:9px; }
.quick-action { min-width:0;border:0;padding:14px 4px 12px;border-radius:19px;background:var(--card);box-shadow:0 4px 16px rgba(70,75,69,.04);display:flex;flex-direction:column;align-items:center; }
.quick-icon { width:42px;height:42px;border-radius:15px;display:grid;place-items:center;margin-bottom:9px; }.quick-icon svg{width:21px}.feed .quick-icon{background:#f8dfce;color:#b67452}.diaper .quick-icon{background:#dceae3;color:#58816d}.sleep .quick-icon{background:#dce4ed;color:#657b98}.more .quick-icon{background:#e9e6df;color:#77776f}
.quick-action b{font-size:13px}.quick-action small{margin-top:4px;font-size:8.5px;color:#9b9d98;white-space:nowrap}
.insight-card { margin-top:22px;padding:16px;border:1px solid #dce6df;border-radius:21px;background:#f0f5f1; }
.insight-top {display:flex;align-items:center;gap:10px}.spark{width:34px;height:34px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--green)}.spark svg{width:18px}.insight-top div{flex:1}.insight-top b,.insight-top small{display:block}.insight-top b{font-size:13px}.insight-top small{margin-top:3px;color:var(--muted);font-size:9px}.insight-top button{border:0;background:none;color:#a2a69f;font-size:20px}.insight-card>p{margin:12px 2px 0;font-size:12px;line-height:1.65;color:#5e625d}.insight-card>p b{color:var(--green-dark)}
.timeline-heading{margin-bottom:5px}.mini-timeline article,.full-timeline article{display:grid;grid-template-columns:46px 12px 1fr auto;gap:10px;align-items:center;min-height:66px;position:relative}.mini-timeline time,.full-timeline time{font-size:10px;color:var(--muted)}.dot{width:9px;height:9px;border-radius:50%;z-index:1}.dot:after{content:"";position:absolute;width:1px;background:#dfddd5;top:38px;bottom:-28px;margin-left:4px}.mini-timeline article:last-child .dot:after,.full-timeline article:last-child .dot:after{display:none}.sleep-dot{background:#8296ad}.feed-dot{background:#d39670}.diaper-dot{background:#6f9a84}.ai-dot{background:#927dad}.mini-timeline b,.mini-timeline small,.full-timeline b,.full-timeline small{display:block}.mini-timeline b,.full-timeline b{font-size:12px}.mini-timeline small,.full-timeline small{font-size:10px;color:var(--muted);margin-top:5px}.tag{font-size:8px;color:#5d7f6f;background:#e2eee7;padding:5px 7px;border-radius:8px}
.bottom-nav { position:absolute;left:0;right:0;bottom:0;height:78px;padding:8px 23px 16px;display:flex;justify-content:space-between;background:rgba(255,253,250,.93);border-top:1px solid rgba(226,224,217,.8);backdrop-filter:blur(14px);z-index:20; }
.bottom-nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:#9b9d98;font-size:9px;min-width:45px}.bottom-nav svg{width:21px}.bottom-nav button.active{color:var(--green-dark);font-weight:800}.bottom-nav button:nth-child(2){margin-top:-20px;width:58px;height:58px;border-radius:21px;background:var(--green-dark);color:#fff;box-shadow:0 8px 18px rgba(63,103,90,.28);padding-top:10px}.bottom-nav button:nth-child(2).active{background:#31564b}
.subpage-header{display:flex;align-items:center;justify-content:space-between;margin:12px 0 22px}.subpage-header h1{font-size:24px}.safe-pill{font-size:9px;color:var(--green-dark);background:#dfebe5;padding:7px 10px;border-radius:20px}.round-add{border:0;width:40px;height:40px;border-radius:14px;background:var(--green-dark);color:white;font-size:24px}
.analysis-hero{text-align:center;padding:30px 20px 26px;border-radius:28px;background:#fff;box-shadow:var(--shadow)}.wave-circle{width:138px;height:138px;margin:0 auto 24px;border-radius:50%;background:radial-gradient(circle,#f9fdfb 35%,#dfece6 36%,#f0f6f3 64%,#dcebe5 65%);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--green-dark);font-size:10px}.wave-circle.recording{animation:pulse 1.3s infinite}.wave-bars{width:45px;height:36px;background:linear-gradient(90deg,transparent 0 8%,var(--green) 8% 14%,transparent 14% 22%,var(--green) 22% 29%,transparent 29% 39%,var(--green) 39% 47%,transparent 47% 57%,var(--green) 57% 64%,transparent 64% 73%,var(--green) 73% 80%,transparent 80%);margin-bottom:5px}@keyframes pulse{50%{box-shadow:0 0 0 15px rgba(95,132,118,.08)}}.analysis-hero h2{font-size:18px;margin:0 0 8px}.analysis-hero p{font-size:11px;color:var(--muted);margin:0 0 20px}.primary-button{border:0;border-radius:14px;padding:13px 24px;background:var(--green-dark);color:white;font-size:13px;font-weight:800;min-width:140px}.recent-analysis{margin-top:24px}.analysis-item{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;border-radius:18px;background:#fff}.result-icon{width:39px;height:39px;display:grid;place-items:center;border-radius:14px;background:#dce4ed;color:#657b98;font-weight:800}.result-icon.hungry{background:#f8dfce;color:#b67452}.analysis-item div{flex:1}.analysis-item b,.analysis-item small{display:block;font-size:12px}.analysis-item small{font-size:9px;color:var(--muted);margin-top:5px}.analysis-item strong{color:var(--green);font-size:13px}
.summary-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:16px 8px;border-radius:20px;background:#fff}.summary-strip div{text-align:center;border-right:1px solid var(--line)}.summary-strip div:last-child{border:0}.summary-strip span,.summary-strip b,.summary-strip small{display:block}.summary-strip span{font-size:19px}.summary-strip b{font-size:14px;margin-top:5px}.summary-strip small{font-size:9px;color:var(--muted);margin-top:3px}.day-tabs{display:flex;justify-content:space-between;margin:22px 45px 10px}.day-tabs button{border:0;background:none;font-size:11px;color:var(--muted);padding:6px 12px}.day-tabs button.active{background:var(--green-dark);color:white;border-radius:20px}.full-timeline{padding:0 5px}.full-timeline article{min-height:72px}.full-timeline button{border:0;background:none;color:#aaa}
.profile-card{text-align:center;padding:24px;border-radius:27px;background:linear-gradient(145deg,#688a7c,#42695c);color:#fff}.big-avatar{width:64px;height:64px;margin:auto;display:grid;place-items:center;border:3px solid rgba(255,255,255,.5);border-radius:22px;background:#dbe7dd;color:var(--green-dark);font-size:22px;font-weight:800}.profile-card h2{margin:10px 0 3px;font-size:20px}.profile-card>p{font-size:10px;opacity:.7}.profile-card>div:last-child{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px}.profile-card span{border-right:1px solid rgba(255,255,255,.18)}.profile-card span:last-child{border:0}.profile-card b,.profile-card small{display:block}.profile-card b{font-size:16px}.profile-card small{font-size:8px;margin-top:3px;opacity:.65}.learning-card{display:flex;gap:12px;margin-top:18px;padding:17px;border-radius:20px;background:#fff}.learning-card>span{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#e2eee7;color:var(--green-dark);font-weight:900;font-size:11px}.learning-card>div{flex:1}.learning-card b{font-size:12px}.learning-card p{font-size:10px;color:var(--muted);line-height:1.55;margin:5px 0 9px}.learning-card i{display:inline-block;width:78%;height:5px;border-radius:5px;background:#edf0eb;overflow:hidden}.learning-card em{display:block;width:72%;height:100%;background:var(--green);border-radius:5px}.learning-card small{font-size:9px;color:var(--green);margin-left:5px}.menu-list{margin-top:18px}.menu-list button{width:100%;border:0;background:#fff;padding:15px;margin-bottom:9px;border-radius:17px;display:flex;align-items:center;gap:12px;text-align:left}.menu-list button>span{font-size:18px}.menu-list div{flex:1}.menu-list b,.menu-list small{display:block}.menu-list b{font-size:12px}.menu-list small{font-size:9px;color:var(--muted);margin-top:4px}.menu-list strong{color:#aaa}
.sheet-backdrop{position:fixed;inset:0;background:rgba(25,30,27,.35);opacity:0;visibility:hidden;transition:.25s;z-index:40}.bottom-sheet{position:fixed;z-index:41;left:50%;bottom:0;width:min(100%,430px);padding:10px 22px 28px;border-radius:28px 28px 0 0;background:#fff;transform:translate(-50%,105%);transition:.3s ease}.sheet-backdrop.open{opacity:1;visibility:visible}.bottom-sheet.open{transform:translate(-50%,0)}.sheet-handle{width:40px;height:4px;border-radius:4px;background:#ddd;margin:0 auto 18px}.sheet-head{display:flex;justify-content:space-between;align-items:center}.sheet-head small{color:var(--green);font-size:10px}.sheet-head h2{font-size:20px;margin:3px 0 0}.sheet-head button,.modal-close{border:0;background:#f1f0ec;width:34px;height:34px;border-radius:12px;font-size:20px}.option-row{display:flex;gap:8px;margin:20px 0}.option-row button{flex:1;border:1px solid var(--line);background:#faf9f6;padding:12px 5px;border-radius:13px;font-size:11px}.option-row button.active{border-color:var(--green);background:#e7f0eb;color:var(--green-dark);font-weight:800}.amount-control{display:flex;align-items:center;justify-content:center;gap:22px;margin:25px 0}.amount-control button{width:38px;height:38px;border:0;border-radius:13px;background:#eef1ed;font-size:20px}.amount-control b{font-size:30px}.amount-control small{font-size:11px;color:var(--muted)}.sheet-save{width:100%;border:0;padding:14px;border-radius:15px;background:var(--green-dark);color:#fff;font-weight:800}
.analysis-result-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:25px;background:rgba(30,34,31,.48);opacity:0;visibility:hidden;transition:.25s}.analysis-result-modal.open{opacity:1;visibility:visible}.result-card{position:relative;width:min(100%,380px);padding:28px 24px 22px;border-radius:28px;background:#fff;text-align:center;transform:translateY(10px);transition:.25s}.open .result-card{transform:none}.modal-close{position:absolute;right:16px;top:16px}.result-badge{display:inline-block;padding:6px 10px;border-radius:20px;background:#e5f0ea;color:var(--green-dark);font-size:9px;font-weight:800}.result-face{width:68px;height:68px;margin:16px auto 10px;border-radius:23px;display:grid;place-items:center;background:#dce4ed;color:#657b98;font-size:24px;font-weight:900}.result-card h2{font-size:20px;margin:0 0 8px}.result-card>p{font-size:11px;color:var(--muted);line-height:1.6}.probability{display:flex;align-items:center;gap:10px;margin:16px 0}.probability>span{flex:1;height:7px;border-radius:8px;background:#eef0ec;overflow:hidden}.probability i{display:block;height:100%;background:var(--green);border-radius:8px}.probability b{font-size:12px;color:var(--green-dark)}.next-step{text-align:left;padding:14px;border-radius:16px;background:#f3f6f3;margin-bottom:18px}.next-step b{font-size:11px}.next-step p{font-size:10px;line-height:1.55;color:#656a65;margin:6px 0 0}.result-card .primary-button{width:100%}.text-button{border:0;background:none;color:var(--muted);font-size:11px;margin-top:12px}.toast{position:fixed;z-index:60;left:50%;bottom:95px;transform:translate(-50%,20px);padding:10px 16px;border-radius:12px;background:#28332f;color:#fff;font-size:11px;opacity:0;visibility:hidden;transition:.25s;white-space:nowrap}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (min-width:600px){body{padding:24px 0}.app-shell{min-height:880px;border-radius:30px}.bottom-nav{position:absolute}.bottom-sheet{bottom:24px;border-radius:28px}.sheet-backdrop{background:rgba(25,30,27,.25)}}