:root{--ink:#253a2d;--muted:#7c897c;--line:#e7eadf;--paper:#fff;--cream:#f7f8f2;--green:#527b53;--green-deep:#315b42;--lime:#dcebba;--orange:#f7ba84;--shadow:0 16px 48px rgba(49,82,53,.07)}
*{box-sizing:border-box}
html{background:var(--cream);scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid #a4c879;outline-offset:3px}
.app-shell{width:min(100%,480px);min-height:100dvh;margin:auto;background:#fbfcf8;position:relative;box-shadow:0 0 100px rgba(47,68,49,.07)}
.topbar{height:76px;padding:16px 23px;display:flex;align-items:center;gap:11px;background:#fbfcf8}
.brand-mark{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:#e5f0d3;color:#538653;font-size:26px;line-height:1;transform:rotate(-12deg)}
.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy strong{font-size:17px;letter-spacing:.03em}.brand-copy span{font-size:10px;color:#9aa497;letter-spacing:.04em}.topbar-sparkle{margin-left:auto;color:#ccdbab;font-size:21px}
main{padding:11px 22px 112px;min-height:calc(100dvh - 76px)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;color:var(--green);display:flex;align-items:center;gap:7px}.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#93b46e}
.page-title{font-size:30px;letter-spacing:-.055em;line-height:1.27;margin:10px 0 9px;font-weight:800}.page-subtitle{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 23px}
.hello-row{display:flex;align-items:end;justify-content:space-between;margin:10px 0 18px}.hello-row .page-title{margin-bottom:0}.date-pill{font-size:11px;color:#668269;background:#eaf2dd;padding:8px 10px;border-radius:20px;white-space:nowrap;margin-bottom:5px}
.pet-card{border-radius:27px;background:linear-gradient(153deg,#dcecc3 0%,#d7eac5 46%,#bcdab4 100%);min-height:306px;position:relative;overflow:hidden;padding:21px 21px 17px;box-shadow:var(--shadow)}
.pet-card:before{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.45);border-radius:50%;top:-120px;right:-45px}.pet-card:after{content:"";position:absolute;width:250px;height:250px;border:1px solid rgba(255,255,255,.35);border-radius:50%;bottom:-180px;left:-66px}
.pet-card-head,.pet-card-foot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.pet-card-head span:first-child{font-size:12px;font-weight:750;color:#3c6847;letter-spacing:.03em}.level-pill{background:rgba(255,255,255,.76);padding:6px 10px;border-radius:100px;font-size:10px;font-weight:800;color:#4a7452;letter-spacing:.07em}.pet-visual{height:195px;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.pet-visual svg{width:100%;max-width:320px;height:205px;filter:drop-shadow(0 12px 12px rgba(52,94,55,.12))}.pet-float{transform-origin:50% 75%;animation:bob 3.2s ease-in-out infinite}.pet-shadow{animation:shadow 3.2s ease-in-out infinite;transform-origin:center}@keyframes bob{50%{transform:translateY(-6px) rotate(1deg)}}@keyframes shadow{50%{transform:scale(.89);opacity:.35}}
.pet-name{display:flex;align-items:center;gap:7px;font-size:16px;font-weight:800;color:#345b40}.pet-status{font-size:11px;color:#668b67}.pet-card-foot{margin-top:-5px}
.progress-card{background:#fff;border:1px solid #eff0e8;border-radius:23px;padding:19px;margin-top:15px;box-shadow:var(--shadow);display:flex;gap:17px;align-items:center}.progress-ring{--fill:0%;position:relative;height:70px;width:70px;border-radius:50%;background:conic-gradient(#85ac72 var(--fill),#edf2e5 var(--fill));display:grid;place-items:center;flex:none}.progress-ring:before{content:"";position:absolute;width:54px;height:54px;border-radius:50%;background:white}.progress-ring span{z-index:1;font-size:16px;font-weight:800;color:#49784e}.progress-copy{flex:1}.progress-copy strong{display:block;font-size:14px;margin-bottom:5px}.progress-copy p{margin:0;font-size:11px;color:#8a9889;line-height:1.55}.energy-tag{font-size:11px;font-weight:700;color:#a56e38;background:#fff1df;border-radius:8px;padding:5px 7px;white-space:nowrap}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin:26px 0 12px}.section-heading h2{margin:0;font-size:17px;letter-spacing:-.02em}.section-heading span,.section-heading button{font-size:11px;color:#8a9b84}.section-heading button{border:0;background:transparent;font-weight:650;padding:4px}
.habit-list{display:flex;flex-direction:column;gap:10px}.habit-card{width:100%;text-align:left;display:flex;align-items:center;gap:13px;padding:14px 14px;border-radius:18px;background:#fff;border:1px solid #edf0e9;box-shadow:0 7px 23px rgba(42,72,45,.035);color:inherit;min-height:70px;transition:transform .15s,border-color .15s,background .15s}.habit-card:active{transform:scale(.985)}.habit-card.done{background:#f3f8ec;border-color:#d8e8c9}.habit-emoji{width:42px;height:42px;border-radius:14px;background:#f2f4e9;display:grid;place-items:center;font-size:22px;flex:none}.habit-card.done .habit-emoji{background:#e2eed3}.habit-label{flex:1;min-width:0}.habit-label strong{display:block;font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.habit-label small{display:block;margin-top:5px;font-size:10px;color:#a2aa9e}.check-circle{width:24px;height:24px;border:1.5px solid #d2dcd0;border-radius:50%;display:grid;place-items:center;color:white;font-size:14px;flex:none}.done .check-circle{background:#79a66f;border-color:#79a66f}.habit-card:not(.done) .check-circle:after{content:""}
.soft-note{background:#f2f6e9;color:#6d886a;font-size:11px;line-height:1.6;padding:13px 15px;border-radius:15px;margin-top:14px;display:flex;gap:9px;align-items:flex-start}.soft-note b{font-size:15px;line-height:1}
.bottom-nav{height:calc(76px + env(safe-area-inset-bottom));padding:7px 15px calc(7px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid #edf0e8;position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);z-index:10;display:flex;justify-content:space-around;backdrop-filter:blur(16px)}.nav-item{border:0;background:none;color:#a1ada0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;font-weight:700;min-width:60px;padding:4px 10px;border-radius:13px}.nav-item.active{color:#426d4b;background:#f0f6e9}.nav-icon{display:grid;place-items:center;height:27px}.nav-icon svg{height:20px;width:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.panel{background:#fff;border:1px solid #edf0e7;border-radius:23px;padding:19px;box-shadow:var(--shadow)}.panel + .panel{margin-top:14px}.panel h2{font-size:15px;margin:0 0 12px}.panel p{font-size:12px;line-height:1.7;color:var(--muted)}
.suggestion-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.suggestion{min-height:75px;border:1px solid #e9eee2;background:#f8faf4;border-radius:14px;text-align:left;padding:11px;color:var(--ink)}.suggestion span{display:block;font-size:10px;color:#7e9b76;margin-bottom:9px}.suggestion strong{display:block;font-size:11px;line-height:1.3}
.habit-manage-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f1e9}.habit-manage-item:last-child{border-bottom:0}.habit-manage-item .habit-emoji{height:38px;width:38px;font-size:19px}.habit-manage-item strong{font-size:13px;flex:1}.icon-button{border:0;background:#f7f8f3;color:#8e9b8d;border-radius:11px;padding:7px 9px;font-size:14px}.field-label{display:block;font-size:11px;color:#6c836d;font-weight:700;margin:13px 0 7px}.text-field{width:100%;height:45px;border:1px solid #dee6d8;background:#fbfcf9;border-radius:12px;padding:0 13px;color:var(--ink);outline:0;font-size:13px}.text-field:focus{border-color:#86ac74}.emoji-grid{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0 16px}.emoji-option{height:38px;width:38px;border:1px solid #ebeee7;border-radius:12px;background:#f9faf5;font-size:19px}.emoji-option.selected{border-color:#8cae79;background:#edf5e5;box-shadow:0 0 0 2px #e4efd9}.primary-button{border:0;background:#416d4c;color:white;padding:13px 17px;border-radius:13px;font-size:12px;font-weight:750;min-height:44px;box-shadow:0 7px 16px rgba(54,100,67,.17)}.primary-button:active{transform:translateY(1px)}.secondary-button{border:1px solid #dbe5d7;background:#fff;color:#57785a;padding:11px 14px;border-radius:12px;font-size:12px;font-weight:700;min-height:42px}.button-row{display:flex;gap:9px;flex-wrap:wrap}
.pet-full-card{margin-top:16px}.pet-full-card .pet-visual{height:240px}.pet-full-card .pet-visual svg{height:250px}.pet-full-card .pet-card-foot{margin-top:-3px}.energy-panel{display:flex;align-items:center;gap:13px}.energy-symbol{height:44px;width:44px;background:#fff2df;color:#bd874f;display:grid;place-items:center;border-radius:14px;font-size:22px}.energy-panel strong{font-size:18px}.energy-panel small{display:block;color:#96a397;font-size:11px;margin-top:3px}.energy-panel .next-points{margin-left:auto;font-size:11px;color:#749073;text-align:right;max-width:115px}.meter{height:8px;background:#eaf0e3;border-radius:10px;overflow:hidden;margin:15px 0 4px}.meter-fill{height:100%;background:linear-gradient(90deg,#a2c185,#5f9868);border-radius:10px}.stage-list{display:flex;flex-direction:column;gap:1px}.stage-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #f0f1eb}.stage-item:last-child{border-bottom:0}.stage-dot{height:31px;width:31px;border-radius:50%;display:grid;place-items:center;background:#eef0e9;color:#a3ada2;font-size:13px;flex:none}.stage-item.unlocked .stage-dot{background:#e7f1d8;color:#5d9163}.stage-item.current .stage-dot{background:#79aa71;color:#fff}.stage-info{flex:1}.stage-info strong{font-size:12px}.stage-info small{display:block;color:#a2aca0;font-size:10px;margin-top:3px}.stage-item .stage-tail{font-size:10px;color:#9ca79a}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0}.stat-box{background:#fff;border:1px solid #edf0e7;border-radius:17px;padding:14px 11px;min-height:85px;box-shadow:var(--shadow)}.stat-box strong{display:block;font-size:22px;font-weight:800;letter-spacing:-.04em}.stat-box span{font-size:10px;color:#91a08f}.weekly-chart{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;align-items:end;height:160px;padding-top:7px}.day-column{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:7px}.bar-track{height:117px;width:100%;max-width:28px;border-radius:8px;background:#f2f5ee;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{width:100%;background:linear-gradient(0deg,#80a975,#b4d29a);border-radius:8px 8px 4px 4px;min-height:0}.day-column.today .bar-fill{background:linear-gradient(0deg,#e8a66d,#f4c892)}.day-column small{font-size:10px;color:#a5afa3}.day-column.today small{font-weight:800;color:#b37a47}.history-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f1eb;font-size:12px}.history-row:last-child{border-bottom:0}.history-row span:last-child{color:#689469;font-weight:750}.empty-state{text-align:center;padding:27px 14px;color:#8a9988;font-size:12px;line-height:1.7}.empty-state .empty-icon{display:block;font-size:30px;margin-bottom:8px}.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translate(-50%,15px);z-index:20;background:#294b36;color:#fff;padding:10px 17px;border-radius:100px;box-shadow:0 9px 25px rgba(20,52,30,.18);font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
.dialog-backdrop{position:fixed;inset:0;z-index:30;background:rgba(20,42,25,.3);display:grid;place-items:center;padding:20px}.dialog{width:min(100%,360px);padding:22px;border-radius:22px;background:white;box-shadow:0 20px 70px rgba(18,48,25,.2)}.dialog h2{font-size:18px;margin:0 0 7px}.dialog p{font-size:12px;color:#859384;line-height:1.6;margin:0 0 19px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px}
@media(min-width:600px){body{padding:26px 0}.app-shell{min-height:calc(100dvh - 52px);border-radius:27px;overflow:hidden;border:1px solid #e6ebdf}main{min-height:calc(100dvh - 128px)}.bottom-nav{bottom:26px;border-radius:0 0 27px 27px;box-shadow:0 -10px 22px rgba(255,255,255,.5)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}