:root{--cream: #FFF9EB;--berry: #5D4954;--soft-pink: #FFD3E0;--mint: #C5F1D7;--sky: #D6E8FA;--accent: #FF6B9D;--white: #FFFFFF}body{margin:0;background-color:#f5f5f5;font-family:Quicksand,system-ui,sans-serif;color:var(--berry)}.app-container{max-width:430px;height:100vh;margin:0 auto;background:var(--cream);display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:0 0 30px #0000001a}.cloud-status{padding:15px 20px;display:flex;justify-content:space-between;align-items:center;background:#ffffff80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100}.sync-badge{display:flex;align-items:center;gap:5px;font-size:12px;background:var(--white);padding:4px 10px;border-radius:15px;color:#8b7783}.sync-badge.active{color:var(--accent);animation:pulse 1s infinite}.stats{display:flex;gap:10px}.stat-pill{display:flex;align-items:center;gap:5px}.track{width:50px;height:6px;background:#0000000d;border-radius:3px;overflow:hidden}.fill{height:100%;transition:width .4s ease}.stage{flex:1;position:relative;padding:20px}.view{position:absolute;top:20px;right:20px;bottom:20px;left:20px;display:flex;flex-direction:column}.hero-card{background:var(--white);padding:30px 20px;border-radius:40px 15px;text-align:center;box-shadow:0 15px 35px #ff6b9d1a;margin-top:40px}.animal-selector{display:flex;justify-content:center;gap:15px;margin-bottom:20px}.select-btn{width:50px;height:50px;border-radius:50%;border:2px solid transparent;background:var(--cream);font-size:24px;cursor:pointer;transition:all .3s}.select-btn.active{border-color:var(--accent);transform:scale(1.1);background:var(--soft-pink)}.btn-main{background:var(--accent);color:#fff;border:none;padding:15px 40px;border-radius:25px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 8px 20px #ff6b9d4d}.animal-display{background:var(--white);padding:15px;border-radius:30px 10px;position:relative;margin-bottom:25px;box-shadow:0 10px 25px #0000000d}.tape{position:absolute;top:-10px;left:50%;transform:translate(-50%);width:70px;height:20px;background:#fffc;border:1px dashed #ccc}.animal-img{width:100%;height:280px;object-fit:cover;border-radius:20px}.placeholder-img{height:280px;display:flex;align-items:center;justify-content:center;background:#f0f0f0;border-radius:20px}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.action-card{background:var(--white);border:none;padding:15px 5px;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;box-shadow:0 4px 10px #00000005}.icon-box{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center}.sub-view h2{text-align:center;margin-bottom:20px}.back-btn{position:absolute;top:0;left:0;background:var(--white);border:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer}.feed-area,.bath-area{flex:1;display:flex;flex-direction:column;align-items:center}.target-mouth,.bath-animal{position:relative;width:100%;max-width:280px}.feed-target-img,.bath-img{width:100%;border-radius:30px}.drop-zone{position:absolute;bottom:20%;left:50%;transform:translate(-50%);width:80px;height:80px;border:3px dashed var(--accent);border-radius:50%;background:#ff6b9d1a}.food-shelf{margin-top:auto;background:var(--white);padding:15px;border-radius:25px;display:flex;gap:20px}.food{font-size:36px;cursor:grab}.drag-proxy{position:fixed;font-size:40px;pointer-events:none;z-index:1000}.bubbles,.water-flow{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:40px;background:#ffffff4d;border-radius:30px}.bath-stepper{margin-top:30px}.btn-step{background:var(--berry);color:#fff;border:none;padding:12px 30px;border-radius:20px;display:flex;align-items:center;gap:10px;cursor:pointer}.poem-card{background:var(--white);padding:30px;border-radius:20px;min-height:200px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:30px;border:1px solid var(--soft-pink)}.poem-text{font-size:20px;line-height:1.6;text-align:center;font-style:italic}.stamp{position:absolute;bottom:10px;right:10px;border:2px solid var(--accent);color:var(--accent);padding:2px 8px;border-radius:5px;transform:rotate(-15deg);font-weight:700;opacity:.6}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.shaking{animation:shake .5s infinite}@keyframes shake{0%{transform:rotate(0)}25%{transform:rotate(1deg)}75%{transform:rotate(-1deg)}to{transform:rotate(0)}}