@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
:root{--cream:#fdf6e9;--paper:#fffaf1;--pink:#efa0a4;--green:#9bbb7d;--yellow:#e9bd61;--brown:#765b48;--line:#eadbc8}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#eee7db}body{font-family:"Zen Maru Gothic","Hiragino Kaku Gothic ProN",sans-serif;color:var(--brown)}button,input{font:inherit}
.app{width:min(100%,430px);min-height:100vh;margin:auto;background:var(--cream);position:relative;overflow:hidden;padding-bottom:82px}
.topbar{height:108px;padding:24px 17px 10px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:rgba(253,246,233,.96);position:relative;z-index:10}.icon-btn{width:42px;height:42px;border:0;background:transparent;color:var(--brown);font-size:25px;cursor:pointer}.brand{text-align:center}.brand h1{font-size:29px;line-height:1;margin:0;font-weight:500;letter-spacing:.12em}.brand h1 span{font-size:16px;margin-left:3px}.brand p{margin:9px 0 0;font-size:12px;letter-spacing:.08em}
.screen{display:none}.screen.active{display:block}.summary-card{margin:0 20px -28px;padding:10px 17px;background:rgba(255,250,241,.97);border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 24px rgba(110,80,50,.09);position:relative;z-index:12}.summary-row{width:100%;display:flex;align-items:center;gap:9px;padding:8px 0}.summary-icon{font-size:21px}.summary-row span:nth-child(2){font-size:13px}.summary-row strong{font-size:18px;color:var(--pink);margin-left:auto}.chevron{font-size:24px;color:#b69f88}.divider{height:1px;background:#efe3d4;margin:0 2px}
.garden{min-height:800px;position:relative;overflow:hidden;padding:230px 16px 120px;background:linear-gradient(#dff0f1 0 35%,#eaf2d9 53%,#d4e7b8 100%)}.garden-backdrop{position:absolute;z-index:1;left:-1%;right:-1%;top:138px;height:475px;background:url("assets/garden_backdrop.png") center top/cover no-repeat}.sun{position:absolute;z-index:0;left:16px;top:25px;font-size:35px;opacity:.7}.cloud{position:absolute;z-index:0;width:82px;height:30px;border-radius:30px;background:rgba(255,255,255,.72)}.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:42px;height:42px;left:13px;top:-17px}.cloud:after{width:52px;height:46px;right:6px;top:-21px}.cloud1{left:62px;top:34px}.cloud2{right:25px;top:58px;transform:scale(.8)}.butterfly{position:absolute;z-index:5;width:38px;height:auto;filter:drop-shadow(0 3px 3px rgba(90,70,45,.08));animation:float 4.5s ease-in-out infinite}.butterfly-yellow{left:23px;top:118px}.butterfly-blue{right:24px;top:148px;animation-delay:1.1s}@keyframes float{50%{transform:translateY(-7px) rotate(3deg)}}
.dream-grid{position:relative;z-index:7;display:grid;grid-template-columns:1fr 1fr;gap:10px 9px}.dream-card{position:relative;min-width:0;height:146px;padding:8px;border:1px solid #e9ddcd;border-radius:17px;background:rgba(255,251,244,.97);box-shadow:0 7px 18px rgba(90,70,45,.12);display:flex;align-items:center;text-align:left;cursor:pointer}.dream-art{width:45%;height:112px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2px}.dream-art img{display:block;width:auto;height:auto;max-width:100%;max-height:104px;object-fit:contain}.dream-info{width:55%;padding:4px 3px}.dream-info h2{font-size:11px;line-height:1.35;margin:0 0 6px;font-weight:500}.dream-info p{font-size:9px;line-height:1.4;margin:0;color:#d28b89}.dream-info p span{color:#8b7a6a}.progress{height:6px;border-radius:10px;background:#f1e1dc;overflow:hidden;margin-top:8px}.progress i{display:block;height:100%;border-radius:10px}.pink i{background:#efa1a4}.greenbar{background:#e2edd6}.greenbar i{background:#9abb7e}.yellowbar{background:#f8edcc}.yellowbar i{background:#e8bd5e}.pct{position:absolute;right:7px;bottom:9px;font-size:12px}.pinktxt{color:#df8f92}.greentxt{color:#7f9f6b}.yellowtxt{color:#c89d45}
.plant-btn{position:relative;z-index:8;display:flex;width:86%;margin:22px auto 0;min-height:84px;border:2px solid #efb5ac;border-radius:28px;background:#fff1e5;box-shadow:0 8px 18px rgba(90,70,45,.1);color:#d98489;align-items:center;justify-content:center;gap:12px;cursor:pointer}.plant-btn-icon{font-size:34px}.plant-btn b{display:block;font-size:20px;font-weight:500}.plant-btn small{display:block;color:#987a67;margin-top:3px;font-size:11px}
.plant-screen{padding:12px 20px 35px;min-height:calc(100vh - 108px);background:linear-gradient(#fdf6e9,#f3eadb)}.subhead{display:flex;align-items:center;gap:10px;margin:0 -5px 20px}.subhead button{border:0;background:none;font-size:35px;color:#8a6f5a;padding:0 7px}.subhead h2{margin:0;font-size:21px;font-weight:500}.plant-intro{text-align:center;font-size:15px;margin-bottom:14px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}.cat{height:78px;border:1px solid #eadcca;background:#fffaf2;border-radius:17px;color:#765b48;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 3px 10px rgba(90,70,45,.06);cursor:pointer}.cat.selected{border:2px solid #efaaa8;background:#fff1ed;color:#d98589}.cat:first-letter{font-size:25px}.cat small{font-size:11px}label{display:block;font-size:12px;margin:13px 2px 6px}input{width:100%;margin-top:6px;padding:13px 14px;border:1px solid #e7d8c6;border-radius:14px;background:#fffdf8;color:#765b48;outline:none}input:focus{border-color:#efaaa8;box-shadow:0 0 0 3px rgba(239,170,168,.12)}.seed-preview{display:flex;align-items:center;gap:12px;margin:20px 0;padding:15px;border-radius:17px;background:#f7f0df;border:1px dashed #dfcdb4}.seed-preview>span{font-size:38px}.seed-preview b{display:block;font-size:13px}.seed-preview small{display:block;margin-top:4px;font-size:10px;color:#947c68}.plant-submit{width:100%;height:56px;border:0;border-radius:25px;background:#a9c98b;color:#fff;font-size:17px;box-shadow:0 7px 14px rgba(103,137,78,.18);cursor:pointer}.note{font-size:9px;line-height:1.6;color:#9a836e;text-align:center;margin:12px 10px}
.bottom-nav{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,430px);height:82px;padding:8px 12px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:rgba(255,250,242,.97);border-top:1px solid #e9dccb;backdrop-filter:blur(10px)}.nav{border:0;background:transparent;color:#876f5d;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}.nav span{font-size:23px}.nav small{font-size:11px}.nav.active{background:#fff2ed;color:#d9868b}
.toast{position:fixed;z-index:30;left:50%;bottom:96px;transform:translate(-50%,15px);width:calc(min(100%,430px) - 40px);padding:12px 16px;border-radius:16px;background:rgba(103,80,62,.94);color:#fff;font-size:12px;text-align:center;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}

.water-screen{padding:12px 20px 35px;min-height:calc(100vh - 108px);background:linear-gradient(#fdf6e9,#f3eadb)}
.water-plant-card{margin:8px 0 22px;padding:20px 18px 18px;text-align:center;background:rgba(255,250,241,.96);border:1px solid #eadbc8;border-radius:24px;box-shadow:0 8px 22px rgba(110,80,50,.09)}
.water-flower{font-size:54px;line-height:1;margin-bottom:8px}
.water-plant-card h3{font-size:17px;font-weight:500;margin:0 0 8px}
.water-plant-card p{margin:0;color:#d28b89;font-size:14px}.water-plant-card p span{color:#8b7a6a}
.big-progress{height:10px;background:#f1e1dc;border-radius:10px;overflow:hidden;margin:16px 8px 7px}.big-progress i{display:block;height:100%;background:#efa1a4;border-radius:10px;transition:width .4s ease}
.water-plant-card>strong{font-size:18px;color:#df8f92}.water-question{text-align:center;font-size:14px;margin:8px 0 12px}
.amount-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.amount-grid button{height:52px;border:1px solid #e6d9c8;border-radius:16px;background:#fffaf2;color:#765b48;cursor:pointer}.amount-grid button.chosen{border:2px solid #efaaa8;background:#fff1ed;color:#d98589;font-weight:700}.amount-grid button.other{grid-column:1/-1}
.custom-amount-wrap{display:none;margin-top:10px}.custom-amount-wrap.show{display:block}.custom-amount-wrap input{margin-top:0}
.water-submit{width:100%;height:58px;margin-top:18px;border:0;border-radius:26px;background:#9fc481;color:#fff;font-size:17px;box-shadow:0 7px 14px rgba(103,137,78,.18);cursor:pointer}.water-note{text-align:center;font-size:9px;line-height:1.6;color:#9a836e;margin:12px 8px}

.records-screen{padding:12px 20px 35px;min-height:calc(100vh - 108px);background:linear-gradient(#fdf6e9,#f3eadb)}
.record-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 24px}.record-summary>div{padding:15px 12px;border:1px solid #eadbc8;border-radius:18px;background:#fffaf2;text-align:center;box-shadow:0 5px 14px rgba(110,80,50,.06)}.record-summary span{display:block;font-size:10px;color:#967d69}.record-summary strong{display:block;margin-top:6px;font-size:19px;color:#d88e91}
.record-title{font-size:14px;margin:0 2px 10px}.record-list{display:flex;flex-direction:column;gap:9px}.record-item{display:flex;align-items:center;gap:10px;padding:13px 12px;border:1px solid #eadbc8;border-radius:17px;background:#fffaf2;box-shadow:0 4px 12px rgba(110,80,50,.05)}.record-flower{width:42px;height:42px;border-radius:50%;background:#fbe7e2;display:flex;align-items:center;justify-content:center;font-size:23px;flex:0 0 auto}.record-main{min-width:0;flex:1}.record-main b{display:block;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-main small{display:block;margin-top:3px;color:#9a836e;font-size:9px}.record-amount{font-size:14px;color:#d78d91;font-weight:700;white-space:nowrap}.empty-records{text-align:center;padding:45px 18px;color:#927a67}.empty-records div{font-size:42px;margin-bottom:10px}.empty-records b{display:block;font-size:13px;font-weight:500}.empty-records small{display:block;margin-top:7px;font-size:10px;line-height:1.6}

.dream-art{position:relative}.growth-badge{position:absolute;left:4px;bottom:3px;min-width:30px;height:30px;padding:4px 6px;border-radius:16px;background:#fff8e9;border:1px solid #ead9c2;box-shadow:0 3px 8px rgba(90,70,45,.09);font-size:17px;line-height:21px;text-align:center}
.growth-message{margin:10px 0 0;padding:10px 12px;border-radius:15px;background:#f7f0df;color:#8c745f;font-size:10px;text-align:center}
.stage-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:13px;background:#eef5df;color:#789866;font-size:10px;margin-top:8px}

.album-screen{padding:12px 20px 35px;min-height:calc(100vh - 108px);background:linear-gradient(#fdf6e9,#f3eadb)}
.album-intro{text-align:center;padding:12px 0 20px}.album-flower{font-size:54px;line-height:1;margin-bottom:8px}.album-intro b{display:block;font-size:15px;font-weight:500}.album-intro small{display:block;margin-top:5px;color:#9a836e;font-size:10px}.album-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}.album-card{padding:12px;border:1px solid #eadbc8;border-radius:20px;background:#fffaf2;box-shadow:0 5px 14px rgba(110,80,50,.06);text-align:center}.album-card .flower{font-size:48px;line-height:1.1;margin-bottom:7px}.album-card h3{font-size:12px;font-weight:500;margin:0}.album-card p{font-size:10px;color:#d38e91;margin:5px 0 0}.album-card small{font-size:9px;color:#9a836e}.empty-album{text-align:center;padding:48px 18px;color:#927a67}.empty-album div{font-size:43px;margin-bottom:9px}.empty-album b{display:block;font-size:13px;font-weight:500}.empty-album small{display:block;margin-top:7px;font-size:10px;line-height:1.6}
.bloom-screen{min-height:calc(100vh - 108px);padding:18px 24px 40px;background:radial-gradient(circle at 50% 30%,#fff9e7 0 15%,#fbe9e2 42%,#f3dcd9 100%);position:relative;overflow:hidden}.bloom-rays{position:absolute;inset:0;opacity:.45;background:repeating-conic-gradient(from 0deg,transparent 0 8deg,rgba(255,255,255,.5) 8deg 14deg);animation:spinRays 18s linear infinite}@keyframes spinRays{to{transform:rotate(360deg)}}.bloom-content{position:relative;z-index:2;text-align:center;padding-top:55px}.bloom-flower{font-size:88px;line-height:1;filter:drop-shadow(0 7px 8px rgba(150,100,70,.12));animation:bloomPop .7s ease-out}@keyframes bloomPop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}.bloom-label{margin-top:10px;letter-spacing:.2em;font-size:9px;color:#b78e76}.bloom-content h2{font-size:25px;font-weight:500;color:#bd7478;margin:10px 0 9px}.bloom-content p{font-size:16px;margin:0;color:#765b48}.bloom-content>strong{display:block;margin-top:9px;font-size:24px;color:#d4878c}.bloom-content>small{display:block;margin-top:5px;color:#9a836e;font-size:10px}.bloom-message{margin:24px 0;padding:16px;border-radius:18px;background:rgba(255,250,242,.7);font-size:11px;line-height:1.8;color:#806958}.bloom-content button{width:100%;height:54px;border:0;border-radius:26px;background:#eaa3a4;color:#fff;font-size:16px;box-shadow:0 7px 14px rgba(180,100,100,.18);cursor:pointer}.bloom-content button.secondary{margin-top:9px;background:rgba(255,250,242,.8);color:#8a6f5a;border:1px solid #e7d5c2;box-shadow:none}

to{opacity:1}}
.garden-bloom-note{position:absolute;z-index:6;left:50%;transform:translateX(-50%);top:165px;padding:7px 12px;border-radius:14px;background:rgba(255,250,242,.82);border:1px solid #eadbc8;color:#8c7460;font-size:9px;white-space:nowrap}