*{box-sizing:border-box;margin:0;padding:0}body{color:#333;-webkit-font-smoothing:antialiased;background:linear-gradient(135deg,#e8f5e9 0%,#fff8e1 50%,#e3f2fd 100%);min-height:100vh;font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif}#root{min-height:100vh}.app{max-width:900px;margin:0 auto;padding:0 16px 32px}.header{text-align:center;padding:32px 16px 16px}.header h1{color:#2e7d32;margin-bottom:8px;font-size:2.2rem;font-weight:800;line-height:1.2}.header-emoji{animation:2s infinite bounce;display:inline-block}.header-emoji:last-child{animation-delay:.3s}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.subtitle{color:#666;font-size:1.1rem;font-weight:500}.filters{flex-wrap:wrap;justify-content:center;gap:8px;padding:16px 0 24px;display:flex}.filter-btn{cursor:pointer;color:#555;background:#fff;border:2px solid #e0e0e0;border-radius:50px;padding:10px 20px;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}.filter-btn:hover{border-color:#66bb6a;transform:scale(1.05)}.filter-btn.active{color:#fff;background:#2e7d32;border-color:#2e7d32;box-shadow:0 4px 12px #2e7d324d}.animal-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;display:grid}.animal-card{cursor:pointer;text-align:left;background:#fff;border:3px solid #0000;border-radius:20px;width:100%;padding:0;font-family:inherit;transition:all .3s;overflow:hidden;box-shadow:0 4px 16px #00000014}.animal-card:hover{border-color:#66bb6a;transform:translateY(-4px);box-shadow:0 8px 30px #00000026}.animal-card:active{transform:scale(.97)}.card-image-wrapper{height:200px;position:relative;overflow:hidden}.card-image{object-fit:cover;width:100%;height:100%}.card-emoji{filter:drop-shadow(0 2px 4px #0000004d);font-size:2.5rem;position:absolute;bottom:8px;right:8px}.card-info{padding:16px}.card-name{color:#333;margin-bottom:8px;font-size:1.15rem;font-weight:700;line-height:1.3}.card-badges{flex-wrap:wrap;gap:6px;display:flex}.badge{border-radius:20px;padding:4px 10px;font-size:.8rem;font-weight:600}.badge-zoo{color:#1565c0;background:#e3f2fd}.badge-help{color:#2e7d32;background:#e8f5e9}.animal-detail{padding-bottom:24px}.back-button{cursor:pointer;color:#555;background:#fff;border:2px solid #e0e0e0;border-radius:50px;align-items:center;gap:4px;margin-bottom:20px;padding:10px 20px;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.back-button:hover{color:#2e7d32;border-color:#66bb6a}.detail-hero{border-radius:24px;max-height:350px;margin-bottom:20px;position:relative;overflow:hidden}.detail-image{object-fit:cover;width:100%;height:350px}.detail-emoji-big{filter:drop-shadow(0 4px 8px #0000004d);font-size:4rem;position:absolute;bottom:16px;right:16px}.detail-name{color:#2e7d32;text-align:center;margin-bottom:20px;font-size:2rem;font-weight:800}.detail-sections{gap:16px;display:grid}.detail-card{background:#fff;border-radius:16px;padding:20px;box-shadow:0 2px 8px #0000000f}.detail-card h3{color:#444;margin-bottom:8px;font-size:1.15rem;font-weight:700}.detail-card p{color:#555;font-size:1.05rem;line-height:1.6}.fun-fact{background:linear-gradient(135deg,#fff9c4,#fff3e0);border:2px solid #ffe082}.sound-card{background:linear-gradient(135deg,#fce4ec,#f3e5f5);border:2px solid #f48fb1}.sound-text{font-weight:700;color:#e65100!important;font-size:1.3rem!important}.play-button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6f00,#ff8f00);border:none;border-radius:50px;align-items:center;gap:6px;margin-top:12px;padding:14px 28px;font-family:inherit;font-size:1.15rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 12px #ff6f004d}.play-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #ff6f0066}.play-button:active{transform:scale(.97)}.play-button.playing{background:linear-gradient(135deg,#43a047,#66bb6a);animation:.5s ease-in-out infinite alternate pulse;box-shadow:0 4px 12px #43a0474d}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.no-sound{margin-top:8px;font-style:italic;color:#999!important}.zoo-card{background:linear-gradient(135deg,#e3f2fd,#e8eaf6);border:2px solid #90caf9}.zoo-list{flex-direction:column;gap:12px;list-style:none;display:flex}.zoo-item{background:#fff;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;padding:12px 16px;display:flex}.zoo-name{color:#1565c0;font-size:1rem;font-weight:700}.zoo-city{color:#777;font-size:.9rem}.footer{text-align:center;color:#999;padding:32px 16px;font-size:1rem;font-weight:600}@media (width<=600px){.header h1{font-size:1.7rem}.subtitle{font-size:.95rem}.animal-grid{grid-template-columns:1fr}.detail-name{font-size:1.6rem}.detail-hero{max-height:250px}.detail-image{height:250px}.detail-emoji-big{font-size:3rem}.filter-btn{padding:8px 14px;font-size:.9rem}.zoo-item{flex-direction:column;align-items:flex-start}}