:root{
 --sage:#95A58E;--sage2:#6B7A65;--sage3:#EAF0E7;--cream:#FAF7F1;
 --ink:#2C312C;--muted:#7D847C;--line:#E7E3DA;--white:#fff;--peach:#F3C7B7;
 --danger:#A44F4F;--shadow:0 14px 35px rgba(60,70,60,.10);
}
*{box-sizing:border-box} html,body{margin:0;background:#ECEAE4;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}
button,input,textarea,select{font:inherit} button{cursor:pointer}
body{min-height:100vh}.wrap{max-width:520px;min-height:100vh;margin:auto;background:var(--cream);position:relative}
.hero{padding:22px 18px 28px;background:linear-gradient(145deg,var(--sage2),var(--sage));color:#fff;border-radius:0 0 30px 30px}
.brand{display:flex;align-items:center;gap:12px}.mark{width:48px;height:48px;border-radius:16px;background:#ffffff22;border:1px solid #ffffff55;display:grid;place-items:center;font-weight:900;font-size:28px;position:relative}
.mark:after{content:"♥";font-size:10px;position:absolute;right:5px;top:4px;color:var(--peach)}
.brand h1{margin:0;font-size:29px;letter-spacing:2px}.brand p{margin:2px 0 0;font-size:12px;opacity:.85}
.content{padding:18px 16px 110px}.card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 8px 24px rgba(50,60,50,.05)}
.stack{display:grid;gap:12px}.row{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:var(--muted);font-size:13px}
.title{font-size:27px;font-weight:850;letter-spacing:-.5px}.section{font-weight:850;font-size:18px;margin:22px 2px 10px}
.primary,.secondary,.danger{width:100%;padding:14px 16px;border-radius:16px;font-weight:800}.primary{border:1px solid var(--sage);background:var(--sage);color:#fff}.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}.danger{border:1px solid #E7C3C3;background:#FFF4F4;color:var(--danger)}
.field{margin:12px 0}.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px 2px}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid var(--line);background:#fff;border-radius:15px;color:var(--ink)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.role{border:1px solid var(--line);background:#fff;border-radius:20px;padding:18px 10px;text-align:center}.role.active{background:var(--sage3);border-color:var(--sage)}.role span{font-size:32px;display:block;margin-bottom:7px}
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 20%,#fff 0,#fbf7f1 55%,#e9efe7 100%)}.loginbox{width:100%;max-width:400px}
.logoBig{text-align:center;margin-bottom:20px}.logoBig .mark{width:92px;height:92px;border-radius:30px;margin:auto;background:linear-gradient(145deg,var(--sage2),var(--sage));font-size:54px;color:#fff;box-shadow:var(--shadow)}.logoBig h1{font-size:43px;margin:12px 0 2px;color:var(--sage2);letter-spacing:4px}
.notice{background:#FFF9E3;border:1px solid #E9DCA5;border-radius:17px;padding:13px;line-height:1.45;font-size:13px}.success{background:#EEF7EC;border:1px solid #CFE1CA;color:#4F6B49;border-radius:17px;padding:13px;line-height:1.45;font-size:13px}.error{background:#FFF1F1;border:1px solid #E7C3C3;color:#934B4B;border-radius:17px;padding:13px;line-height:1.45;font-size:13px}
.baby{display:flex;gap:12px;align-items:center}.babyPic{width:66px;height:66px;border-radius:22px;background:linear-gradient(145deg,#F5D4C5,#F0BFA9);display:grid;place-items:center;font-size:37px}.badge{padding:6px 9px;border-radius:999px;background:var(--sage3);color:var(--sage2);font-size:11px;font-weight:850}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:#fff;border:1px solid var(--line);border-radius:19px;padding:13px}.metric strong{display:block;font-size:24px;margin-top:5px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.qbtn{border:1px solid var(--line);background:#fff;border-radius:18px;padding:13px 4px;color:var(--ink)}.qbtn .ico{display:block;font-size:24px;margin-bottom:5px}
.timeline{display:grid;gap:9px}.entry{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px}.entryL{display:flex;align-items:center;gap:10px}.eico{width:40px;height:40px;border-radius:13px;background:var(--sage3);display:grid;place-items:center}
.ai{background:linear-gradient(145deg,#EEF4EB,#fff);border:1px solid #D8E2D4;border-radius:21px;padding:15px;line-height:1.5}
.nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);display:grid;grid-template-columns:repeat(5,1fr);background:#ffffffec;backdrop-filter:blur(15px);border-top:1px solid var(--line);padding:8px 3px calc(9px + env(safe-area-inset-bottom));z-index:20}.nav button{border:0;background:transparent;color:var(--muted);font-size:11px;padding:5px 1px}.nav button.on{color:var(--sage2);font-weight:850}
.photos{display:grid;grid-template-columns:1fr 1fr;gap:10px}.photo{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px}.photo img{display:block;width:100%;height:160px;object-fit:cover}.photo .pmeta{padding:9px}
.bubbles{display:flex;flex-direction:column;gap:9px}.bubble{max-width:82%;padding:11px 13px;border-radius:16px;line-height:1.4}.mine{align-self:flex-end;background:var(--sage);color:#fff;border-bottom-right-radius:5px}.theirs{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.compose{display:flex;gap:8px;margin-top:13px}.compose input{flex:1;border:1px solid var(--line);border-radius:15px;padding:12px}.compose button{width:auto;padding:0 15px}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:flex-end;justify-content:center;z-index:50}.sheet{width:min(100%,520px);background:var(--cream);border-radius:28px 28px 0 0;padding:18px;max-height:90vh;overflow:auto}.x{border:1px solid var(--line);background:#fff;border-radius:12px;padding:8px 10px}
.setting{display:flex;align-items:center;justify-content:space-between;padding:14px;border:1px solid var(--line);background:#fff;border-radius:17px}.code{font-family:ui-monospace,monospace;background:#F2F0EA;border-radius:12px;padding:12px;word-break:break-all}
.center{text-align:center}.spinner{width:30px;height:30px;border:3px solid #ddd;border-top-color:var(--sage);border-radius:50%;animation:spin 1s linear infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}