:root { color-scheme: light; --ink:#24304b; --muted:#6b768b; --bg:#f7f8fc; --card:#fff; --line:#e6eaf2; --violet:#5966d8; --violet-dark:#4853ba; --violet-pale:#edeefe; --blue-pale:#e8f1fe; --mint-pale:#e3f5ed; --shadow:0 10px 32px rgba(41,53,97,.045); font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); padding-bottom:env(safe-area-inset-bottom); }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #8f9cf8; outline-offset:2px; }
.shell { max-width:540px; margin:auto; min-height:100vh; padding:0 18px 40px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:89px; padding-top:env(safe-area-inset-top); }
.brand { display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; place-items:center; width:43px; height:43px; border-radius:14px; background:var(--violet); color:#fff; font-size:28px; font-weight:700; }
.brand strong,.brand small { display:block; }
.brand strong { font-size:19px; letter-spacing:-.4px; line-height:1.3; }
.brand small { font-size:11px; color:var(--muted); line-height:1.5; }
.status-pill { font-size:11px; color:#647187; background:#ecedf3; padding:9px 11px; border-radius:20px; white-space:nowrap; }
.status-pill.cloud { color:#25674d; background:#dff3e8; }
.status-pill.demo { color:#756442; background:#f5eddb; }
.hidden { display:none !important; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:24px; margin-bottom:4px; letter-spacing:-.85px; }
h2 { font-size:17px; margin:0; letter-spacing:-.35px; }
h3 { font-size:16px; margin:0; }
p { line-height:1.45; }
.muted,.small { color:var(--muted); }
.small { font-size:12px; }
.eyebrow { letter-spacing:1.8px; color:var(--violet); font-weight:800; font-size:10px; margin-bottom:5px; }
.welcome-line { display:flex; justify-content:space-between; align-items:center; margin:11px 0 19px; }
.date-circle { width:47px; height:47px; border-radius:15px; background:var(--violet-pale); color:var(--violet); display:grid; place-items:center; font-size:23px; font-weight:750; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
.stat { display:flex; flex-direction:column; min-height:155px; border-radius:18px; padding:16px 15px; gap:7px; }
.stat-milk { background:var(--violet-pale); }
.stat-diaper { background:var(--mint-pale); }
.stat-icon { height:23px; font-size:24px; line-height:23px; color:var(--violet); }
.stat-diaper .stat-icon { color:#36836d; }
.stat-caption { font-size:12px; color:#57617f; font-weight:600; }
.stat strong { font-size:28px; line-height:1; letter-spacing:-.9px; font-weight:800; }
.stat-detail { color:#647187; font-size:11px; }
.section-title { margin:22px 0 12px; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.panel { background:var(--card); border:1px solid #f0f1f6; border-radius:19px; box-shadow:var(--shadow); padding:17px; margin-bottom:13px; }
.action-panel { padding:18px; }
.action-title { display:flex; align-items:center; gap:11px; }
.action-title p { font-size:12px; color:var(--muted); margin:3px 0 0; }
.round-icon { display:grid; place-items:center; border-radius:13px; height:40px; width:40px; font-size:24px; }
.milk-icon { background:var(--violet-pale); color:var(--violet); }
.diaper-icon { background:var(--mint-pale); color:#38866f; }
.amount-picker { display:flex; align-items:center; justify-content:center; gap:29px; padding:22px 0 18px; }
.round-btn { border-radius:50%; width:45px; height:45px; display:grid; place-items:center; background:#f4f5fa; border:0; font-size:27px; color:#63708a; font-weight:400; }
.round-btn:active { transform:scale(.96); }
.amount-reading { min-width:80px; text-align:center; }
.amount-reading strong { font-size:38px; font-weight:800; display:block; line-height:1.1; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.amount-reading span { font-size:12px; color:var(--muted); }
.segments { display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:11px; background:#f2f4fa; gap:3px; margin-bottom:15px; }
.segment { min-height:38px; padding:0 2px; border:0; background:transparent; color:#63708b; border-radius:9px; font-size:12px; font-weight:650; }
.segment.selected { background:white; box-shadow:0 1px 6px #23335519; color:var(--ink); }
.btn { min-height:45px; width:100%; border-radius:11px; border:0; font-size:14px; font-weight:720; padding:12px 15px; }
.btn:disabled { opacity:.6; cursor:wait; }
.btn.primary { background:var(--violet); color:white; }
.btn.primary:active { background:var(--violet-dark); }
.btn.secondary { background:#eeeffa; color:#4958ab; }
.btn.ghost { background:transparent; color:#6c7790; }
.btn.danger-outline { border:1px solid #f3ccd0; background:#fff; color:#b84253; }
.btn.huge { min-height:53px; font-size:15px; }
.diaper-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:18px; }
.diaper-button { border:1px solid #e5e8f2; background:#f9fafc; min-height:83px; border-radius:14px; font-size:14px; font-weight:680; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:#39445a; }
.diaper-button span { font-size:23px; line-height:1; color:#478fb4; }
.diaper-button:active { border-color:var(--violet); background:#eff1ff; }
.compact { padding:14px 17px; }
.time-panel { display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px; }
.time-panel strong { font-size:13px; }
.time-panel p { margin:4px 0 0; }
.time-panel #earlier-control { grid-column:1/-1; padding-top:10px; }
.toggle-time { display:flex; align-items:center; gap:7px; font-size:12px; white-space:nowrap; color:#57627b; cursor:pointer; }
.toggle-time input { width:18px; height:18px; accent-color:var(--violet); }
label { font-size:13px; font-weight:650; color:#4c5770; display:block; }
input,textarea,select { width:100%; border:1px solid #dfe4ee; border-radius:11px; background:white; color:var(--ink); padding:13px 12px; min-height:46px; font-size:16px; }
textarea { resize:vertical; }
.form-stack { display:flex; flex-direction:column; gap:10px; margin-top:13px; }
.history-panel { padding:4px 16px; }
.history-row { display:flex; align-items:center; gap:11px; border-bottom:1px solid #f0f2f5; padding:14px 0; }
.history-row:last-child { border-bottom:0; }
.history-icon { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:13px; font-size:18px; background:var(--violet-pale); color:#6772da; }
.history-icon.diaper { background:var(--mint-pale); color:#33866a; }
.history-body { min-width:0; flex:1; }
.history-body strong { font-size:13px; font-weight:720; }
.history-body p { color:var(--muted); font-size:11px; margin:3px 0 0; overflow-wrap:anywhere; }
.history-meta { color:var(--muted); font-size:11px; margin-left:auto; white-space:nowrap; }
.icon-button { border:0; padding:7px 4px 7px 8px; background:transparent; color:#758198; font-size:17px; }
.history-day-label { font-size:10px; font-weight:850; letter-spacing:1px; color:#a0a9b9; padding:14px 0 0; }
.empty { margin:18px 0; text-align:center; font-size:13px; color:#7b879c; }
.chart-panel { padding:18px 15px; }
.week-chart { display:flex; gap:8px; justify-content:space-around; height:132px; align-items:end; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:end; height:100%; gap:5px; }
.bar-track { height:92px; width:100%; max-width:25px; border-radius:6px 6px 3px 3px; background:#f1f2f9; display:flex; align-items:end; overflow:hidden; }
.bar-fill { width:100%; background:#8b93e8; min-height:0; border-radius:5px 5px 0 0; }
.bar-col.today .bar-fill { background:var(--violet); }
.bar-col label { font-size:10px; font-weight:600; color:#7b869b; }
.bar-col span { color:#778299; font-size:9px; font-variant-numeric:tabular-nums; }
.link-btn { background:none; border:0; color:var(--violet); font-size:12px; font-weight:700; padding:6px; }
.sharing-panel { margin-top:23px; }
.sharing-panel summary { font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:space-between; list-style:none; }
.sharing-panel summary::-webkit-details-marker { display:none; }
.sharing-content { padding:16px 0 0; }
.sharing-content p { margin:0 0 12px; }
.invite-box { display:flex; align-items:center; gap:6px; margin-bottom:14px; background:#f5f6fb; border-radius:10px; padding:7px; }
.invite-box code { flex:1; font-size:10px; color:#49536c; overflow-wrap:anywhere; }
.small-btn { width:auto; min-height:36px; font-size:12px; flex:none; }
footer { text-align:center; color:#a0a8b7; font-size:10px; margin:25px 0 10px; }
.page-state { padding:40px 3px 20px; }
.page-state h1 { font-size:27px; }
.page-state .panel { margin-top:17px; }
.page-state .panel h2 { font-size:15px; }
.auth-art { background:#e8eafb; width:65px; height:65px; border-radius:21px; color:var(--violet); display:grid; place-items:center; font-size:39px; margin-bottom:18px; }
.page-state p { color:var(--muted); font-size:14px; margin-bottom:22px; }
.spinner { border:3px solid #e4e7fa; border-top-color:var(--violet); width:29px; height:29px; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin {to{transform:rotate(360deg)}}
dialog { border:0; border-radius:20px; width:min(92vw,460px); max-height:85vh; box-shadow:0 22px 80px #1c294655; padding:0; color:var(--ink); }
dialog::backdrop { background:#0c173d82; }
.edit-content { padding:22px; display:flex; flex-direction:column; gap:10px; overflow:auto; }
.dialog-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:3px; }
.close-btn { border:0; color:#79869b; background:#f2f4f8; border-radius:50%; width:33px; height:33px; font-size:24px; line-height:1; }
.toast { position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translate(-50%,20px); width:max-content; max-width:min(90vw,400px); border-radius:14px; background:#24304b; box-shadow:0 6px 22px #131d3555; color:#fff; padding:12px 16px; opacity:0; pointer-events:none; font-size:13px; text-align:center; transition:opacity .2s,transform .2s; z-index:10; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (min-width:580px) {.shell {padding-left:30px; padding-right:30px;} .summary-grid {gap:16px;} .panel {padding:20px;}}
@media (max-width:370px) {.shell {padding:0 12px 25px} .stat {padding:13px 11px;} .segment {font-size:11px;} .time-panel {grid-template-columns:1fr;} .toggle-time {justify-content:flex-start;}}

/* v2: nursing and bottle unit controls */
.dual-segments{grid-template-columns:repeat(2,1fr);margin:20px 0 14px}
.dual-segments .segment{min-height:43px;font-size:13px}
.units-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.unit-segments{display:grid;grid-template-columns:repeat(2,1fr);width:122px;margin:0;padding:3px}
.unit-segments .segment{min-height:32px;font-size:13px}
.amount-picker{padding:9px 0 0;gap:15px}
.amount-reading{width:124px;min-width:110px}
.amount-reading input{font-size:32px;text-align:center;font-weight:800;letter-spacing:-.9px;width:100%;padding:6px 2px;min-height:53px;line-height:1.1;border-color:#eff0f6;border-radius:8px;background:#fafbff;font-variant-numeric:tabular-nums}
.amount-reading span{display:block;margin-top:4px}
.unit-equivalent{font-size:12px;text-align:center;color:var(--muted);margin:5px 0 17px}
.nursing-intro{margin:12px 0}
.nursing-clock{font-size:49px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-1.5px;text-align:center;padding:14px 0 20px}
.nursing-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:13px}
.side-button{background:#f7f8fc;border:2px solid #e4e8f2;color:#4d5874;border-radius:15px;min-height:85px;display:flex;align-items:center;justify-content:center;gap:7px;flex-direction:column;font-weight:700}
.side-button strong{font-size:19px;font-variant-numeric:tabular-nums}
.side-button.active{background:#eceeff;border-color:#5966d8;color:#4d58ba}
.nursing-timer-actions{display:flex;gap:9px;margin-bottom:11px}
.nursing-timer-actions .btn{width:50%}
.manual-nursing{padding:16px 0 3px;margin-top:12px;border-top:1px solid var(--line)}
.manual-nursing summary{font-size:13px;color:var(--violet);font-weight:700;cursor:pointer}
.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}
.manual-grid label{font-size:12px}
.manual-grid input{margin-top:7px}
.manual-nursing p{margin:9px 0 0}
@media(max-width:370px){.amount-picker{gap:9px}.side-button{min-height:75px}}

/* v3: date review navigation */
.day-navigation{padding:12px 15px;margin-bottom:14px}
.day-navigation-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.day-navigation-heading label{font-size:12px}
.day-navigation-controls{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center;margin-top:5px}
.day-navigation-controls input{min-width:0;width:100%;height:47px;min-height:47px;padding:8px 9px;text-align:center;font-size:15px;font-weight:700;border-radius:12px}
.day-arrow{min-height:47px;width:48px;border:1px solid #e5e8f2;border-radius:12px;background:#f4f5fb;color:var(--violet);font-size:28px;line-height:1}
.day-arrow:disabled{opacity:.3;cursor:default}
.day-load-status{font-size:11px;color:var(--muted);min-height:0}
.day-load-status:not(:empty){padding-top:7px}
@media(max-width:370px){.day-navigation-controls{grid-template-columns:41px minmax(0,1fr) 41px;gap:5px}.day-arrow{width:41px}}