:root { --paper:#fff8ee; --card:#fffdf9; --ink:#4b352a; --muted:#947b6c; --orange:#d97745; --orange-dark:#934c2a; --peach:#ffe2c4; --green:#e7f0d9; --rose:#f5ded3; --line:#f0e4d9; --shadow:0 12px 30px rgba(115, 70, 42, .09); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; } .shell { width:min(100%, 760px); min-height:100vh; margin:auto; padding:28px 18px 54px; }.hidden { display:none!important; }
.access { min-height:100vh; display:grid; align-content:center; gap:22px; text-align:center; }.access-photo { width:144px; height:144px; margin:auto; border:7px solid #fff; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); }.eyebrow { color:#bc704a; font-size:13px; font-weight:700; letter-spacing:.08em; }.access h1 { margin:4px 0 0; font-size:32px; }.access p { max-width:360px; margin:0 auto; color:var(--muted); line-height:1.7; }.access-card { width:min(100%,420px); margin:auto; padding:22px; text-align:left; background:var(--card); border-radius:25px; box-shadow:var(--shadow); }.access-card label,.field label { display:block; margin:0 0 8px; color:#785a4b; font-size:14px; font-weight:700; }.access-card input,.field input,.field select,.field textarea { width:100%; padding:13px; color:var(--ink); border:1px solid var(--line); border-radius:14px; background:#fffaf5; outline-color:var(--orange); }.access-card label + label { margin-top:16px; }.primary { width:100%; margin-top:20px; padding:14px 18px; border:0; border-radius:16px; color:#fff; background:var(--orange); font-weight:800; }.helper { margin-top:12px!important; font-size:13px; text-align:center; }
.topline,.section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }.topline h1 { margin:4px 0 0; font-size:26px; }.link { padding:0; border:0; color:#ad633e; background:transparent; font-size:14px; }.hero { position:relative; min-height:230px; margin-top:24px; overflow:hidden; border-radius:28px; background:#fff0dc; box-shadow:var(--shadow); }.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; }.hero-content { position:relative; padding:28px; }.countdown { margin:8px 0; color:var(--orange-dark); font-size:64px; font-weight:850; letter-spacing:.04em; }.next-label { color:#80553e; }.hero.overdue { background:#ffe4d9; }.hero.overdue .countdown { color:#b15437; }.actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }.action { min-height:102px; padding:12px 8px; border:0; border-radius:21px; color:#694331; text-align:center; font-size:18px; font-weight:800; }.action small { display:block; margin-top:7px; color:#8f6d5b; font-size:12px; font-weight:500; }.feed { background:var(--peach); }.stool { background:var(--green); }.weight { background:var(--rose); }
.section-head { margin:36px 2px 14px; }.section-head h2 { margin:0; font-size:21px; }.card { background:var(--card); border-radius:23px; box-shadow:var(--shadow); }.stats { display:grid; grid-template-columns:repeat(3,1fr); padding:20px 4px; }.stat { padding:0 10px; text-align:center; border-right:1px solid var(--line); }.stat:last-child { border:0; }.stat strong { display:block; color:#75432c; font-size:20px; }.stat span { display:block; margin-top:7px; color:var(--muted); font-size:12px; }.timeline { overflow:hidden; }.entry { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--line); }.entry:last-child { border:0; }.entry time { color:#b26b46; font-size:13px; }.entry strong { display:block; font-size:15px; }.entry small,.entry button { color:var(--muted); font-size:12px; }.entry button { border:0; background:transparent; }.empty { padding:34px; color:var(--muted); text-align:center; }.trend-card { padding:20px; }.trend-top { display:flex; justify-content:space-around; text-align:center; }.trend-top strong { display:block; color:#76442d; font-size:23px; }.trend-top span { color:var(--muted); font-size:12px; }.chart { width:100%; height:190px; margin-top:18px; }.chart-note { margin:0; color:var(--muted); font-size:12px; text-align:center; }.footer-note { margin:38px 0 0; color:var(--muted); font-size:12px; line-height:1.6; text-align:center; }
.dialog { width:min(calc(100% - 28px), 520px); max-height:92vh; padding:0; border:0; border-radius:25px; color:var(--ink); background:var(--card); box-shadow:0 24px 60px rgba(50,28,17,.25); }.dialog::backdrop { background:rgba(62,42,32,.38); }.dialog-body { padding:24px; }.dialog-head { display:flex; align-items:center; justify-content:space-between; }.dialog h2 { margin:0; font-size:22px; }.close { border:0; background:transparent; color:var(--muted); font-size:15px; }.record-types { display:flex; gap:8px; margin:20px 0; }.record-type { flex:1; padding:10px 5px; border:1px solid var(--line); border-radius:13px; color:#805d4c; background:#fffaf5; }.record-type.selected { border-color:#d97745; color:#fff; background:#d97745; }.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.field.full { grid-column:1/-1; }.field textarea { min-height:88px; resize:vertical; }.notice { margin:17px 0 0; color:#986a50; font-size:13px; line-height:1.6; }.report-text { width:100%; min-height:240px; margin-top:20px; padding:16px; border:1px solid var(--line); border-radius:16px; color:var(--ink); background:#fffaf5; line-height:1.7; resize:vertical; }.secondary { width:100%; margin-top:12px; padding:12px 16px; border:0; border-radius:16px; color:#a35e3b; background:#fff1e7; font-weight:700; }.setting-row { display:flex; align-items:center; gap:10px; margin-top:20px; }.setting-row input { width:90px; padding:12px; border:1px solid var(--line); border-radius:13px; text-align:center; }.invite { margin-top:18px; padding:16px; border-radius:16px; background:#fff4e8; }.invite p { margin:0 0 12px; color:#82543d; line-height:1.5; }.invite input { width:100%; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fffdf9; font-size:12px; }.toast { position:fixed; z-index:9; right:18px; bottom:20px; max-width:300px; padding:12px 16px; border-radius:14px; color:#fff; background:#4b352a; box-shadow:var(--shadow); }
@media (min-width: 700px) { .shell { padding:40px 38px 64px; }.hero { min-height:260px; }.countdown { font-size:76px; }.actions { gap:14px; }.action { min-height:118px; } }