*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:#f5f5f5;color:#333;-webkit-tap-highlight-color:transparent}.display-page{position:fixed;inset:0;overflow:hidden;background:linear-gradient(135deg,#ffd1dc,#a8e6cf,#ffd3b6,#d4a5ff);background-size:400% 400%;animation:gradient-shift 12s ease infinite;font-family:system-ui,sans-serif}@keyframes gradient-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.wave-layer{position:absolute;bottom:0;left:-5%;width:110%;height:100%;pointer-events:none}.wave-layer svg{position:absolute;bottom:0;width:100%}.wave-back{z-index:0}.wave-mid{z-index:1}.wave-front{z-index:2}@keyframes wave-drift-1{0%,to{transform:translate(0) scaleY(1)}25%{transform:translate(-30px) scaleY(1.08)}50%{transform:translate(0) scaleY(1)}75%{transform:translate(30px) scaleY(.92)}}@keyframes wave-drift-2{0%,to{transform:translate(0) scaleY(1)}33%{transform:translate(40px) scaleY(1.1)}66%{transform:translate(-40px) scaleY(.9)}}@keyframes wave-drift-3{0%,to{transform:translate(0) scaleY(1)}50%{transform:translate(-25px) scaleY(1.05)}}.wave-back svg{animation:wave-drift-1 8s ease-in-out infinite}.wave-mid svg{animation:wave-drift-2 6s ease-in-out infinite}.wave-front svg{animation:wave-drift-3 4s ease-in-out infinite}.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none;z-index:0}@keyframes blob-float-1{0%,to{transform:translate(0) scale(1)}25%{transform:translate(80px,-40px) scale(1.15)}50%{transform:translate(-30px,-80px) scale(.95)}75%{transform:translate(-60px,20px) scale(1.1)}}@keyframes blob-float-2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-70px,50px) scale(1.2)}66%{transform:translate(50px,-30px) scale(.9)}}@keyframes blob-float-3{0%,to{transform:translate(0) scale(1.05)}50%{transform:translate(60px,60px) scale(.85)}}.blob-1{width:350px;height:350px;background:#ff9de2;top:10%;left:15%;animation:blob-float-1 14s ease-in-out infinite}.blob-2{width:280px;height:280px;background:#9de2ff;top:50%;right:10%;animation:blob-float-2 11s ease-in-out infinite}.blob-3{width:320px;height:320px;background:#ffe59d;bottom:15%;left:40%;animation:blob-float-3 16s ease-in-out infinite}.blob-4{width:200px;height:200px;background:#b59dff;top:30%;right:35%;animation:blob-float-1 10s ease-in-out infinite reverse}.blob-5{width:250px;height:250px;background:#9dffc5;bottom:30%;left:10%;animation:blob-float-2 13s ease-in-out infinite reverse}.dance-floor{position:absolute;inset:0;z-index:3}.dancing-animal{position:absolute;transform:translate(-50%,-50%);cursor:pointer;display:flex;flex-direction:column;align-items:center;will-change:left,top,transform}.dancing-animal-img{width:110px;height:110px;object-fit:cover;border-radius:50%;border:4px solid #fff;box-shadow:0 6px 24px #00000040;pointer-events:none}.dancing-animal:hover .dancing-animal-img{filter:brightness(1.15)}.animal-name-tag{margin-top:6px;background:#ffffffe6;color:#e74c8b;font-weight:700;font-size:.75rem;padding:2px 10px;border-radius:12px;white-space:nowrap;box-shadow:0 2px 8px #0000001a;pointer-events:none}@keyframes bounce-beat{0%,to{transform:translate(-50%,-50%) translateY(0) scale(1)}40%{transform:translate(-50%,-50%) translateY(-30px) scale(1.08)}60%{transform:translate(-50%,-50%) translateY(-30px) scale(1.08)}}.dance-bounce{animation:bounce-beat var(--beat-dur, .5s) ease-in-out infinite}@keyframes lean-lr{0%,to{transform:translate(-50%,-50%) rotate(0)}25%{transform:translate(-50%,-50%) rotate(15deg) translate(10px)}75%{transform:translate(-50%,-50%) rotate(-15deg) translate(-10px)}}.dance-lean-lr{animation:lean-lr calc(var(--beat-dur, .5s) * 2) ease-in-out infinite}@keyframes spin-dance{0%{transform:translate(-50%,-50%) rotate(0) scale(1)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.1)}to{transform:translate(-50%,-50%) rotate(360deg) scale(1)}}.dance-spin{animation:spin-dance calc(var(--beat-dur, .5s) * 2) ease-in-out infinite}@keyframes wave-pop{0%,to{transform:translate(-50%,-50%) scale(1) translateY(0)}30%{transform:translate(-50%,-50%) scale(1.25) translateY(-20px)}60%{transform:translate(-50%,-50%) scale(1.25) translateY(-20px)}}.dance-wave{animation:wave-pop calc(var(--beat-dur, .5s) * 2) ease-in-out infinite}@keyframes big-jump{0%,to{transform:translate(-50%,-50%) translateY(0) scale(1)}20%{transform:translate(-50%,-50%) translateY(5px) scale(.9,1.1)}40%{transform:translate(-50%,-50%) translateY(-50px) scale(1.05,.95)}60%{transform:translate(-50%,-50%) translateY(-50px) scale(1.05)}80%{transform:translate(-50%,-50%) translateY(0) scale(.95,1.05)}}.dance-jump{animation:big-jump var(--beat-dur, .5s) ease-in-out infinite}@keyframes wiggle{0%,to{transform:translate(-50%,-50%) translate(0) rotate(0)}15%{transform:translate(-50%,-50%) translate(-8px) rotate(-5deg)}30%{transform:translate(-50%,-50%) translate(8px) rotate(5deg)}45%{transform:translate(-50%,-50%) translate(-6px) rotate(-3deg)}60%{transform:translate(-50%,-50%) translate(6px) rotate(3deg)}75%{transform:translate(-50%,-50%) translate(-3px) rotate(-1deg)}}.dance-wiggle{animation:wiggle var(--beat-dur, .5s) ease-in-out infinite}.animal-toast{position:fixed;bottom:calc(1.5rem + env(safe-area-inset-bottom));right:calc(1.5rem + env(safe-area-inset-right));background:#fff;border-radius:16px;box-shadow:0 8px 32px #0000002e;padding:1rem;display:flex;gap:1rem;align-items:center;max-width:340px;z-index:1000;animation:toast-in .3s ease-out}@keyframes toast-in{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.animal-toast img{width:72px;height:72px;object-fit:cover;border-radius:12px;flex-shrink:0}.toast-content h3{margin:0 0 .25rem;color:#e74c8b}.toast-content p{margin:0;color:#666;font-size:.9rem}.toast-close{position:absolute;top:.5rem;right:.5rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#999;line-height:1}.toast-close:hover{color:#333}.music-player{position:fixed;top:calc(1rem + env(safe-area-inset-top));right:calc(1rem + env(safe-area-inset-right));z-index:1000}.music-btn{width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:#ffffffd9;font-size:1.4rem;cursor:pointer;box-shadow:0 2px 12px #00000026;display:flex;align-items:center;justify-content:center}.music-btn:hover{background:#fff}.nav-link{position:fixed;top:calc(1rem + env(safe-area-inset-top));left:calc(1rem + env(safe-area-inset-left));z-index:1000;background:#ffffffd9;border:3px solid #fff;padding:.5rem 1rem;border-radius:24px;text-decoration:none;color:#e74c8b;font-weight:700;font-size:.9rem;box-shadow:0 2px 12px #00000026}.nav-link:hover{background:#fff}@media(max-width:600px){.dancing-animal-img{width:70px;height:70px;border-width:3px}.animal-name-tag{font-size:.65rem;padding:1px 7px}}.display-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;text-shadow:0 2px 8px rgba(0,0,0,.2)}.admin-page{max-width:700px;margin:0 auto;padding:calc(2rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));font-family:system-ui,sans-serif}.back-link{display:inline-block;color:#e74c8b;text-decoration:none;font-weight:600;margin-bottom:.5rem}.back-link:hover{text-decoration:underline}.admin-page h1{text-align:center;color:#e74c8b;margin-bottom:1.5rem}.animal-form{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 12px #00000014;margin-bottom:2rem}.animal-form h2{margin-top:0;color:#333}.animal-form label{display:block;margin-bottom:1rem;font-weight:600;color:#555}.animal-form input[type=text],.animal-form input[type=password],.animal-form textarea{display:block;width:100%;margin-top:.3rem;padding:.5rem;border:2px solid #ddd;border-radius:8px;font-size:16px;box-sizing:border-box}.animal-form input[type=text]:focus,.animal-form input[type=password]:focus,.animal-form textarea:focus{border-color:#e74c8b;outline:none}.animal-form input[type=file]{display:block;margin-top:.3rem}.image-preview{width:120px;height:120px;object-fit:cover;border-radius:8px;margin-top:.5rem}.form-actions{display:flex;gap:.5rem;margin-top:1rem}.form-actions button{padding:.6rem 1.5rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;font-weight:600}.form-actions button[type=submit]{background:#e74c8b;color:#fff}.form-actions button[type=submit]:hover{background:#d63a7a}.form-actions button[type=button]{background:#eee;color:#333}.animal-list h2{color:#333}.animal-card{display:flex;align-items:center;gap:1rem;background:#fff;border-radius:12px;padding:1rem;margin-bottom:.75rem;box-shadow:0 1px 6px #0000000f}.animal-card img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}.animal-info{flex:1;min-width:0}.animal-info strong{display:block;color:#333}.animal-info p{margin:.25rem 0 0;color:#777;font-size:.9rem}.animal-actions{display:flex;gap:.4rem;flex-shrink:0}.animal-actions button{padding:.4rem .8rem;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;font-weight:600;background:#f0f0f0;color:#333}.animal-actions button:hover{background:#ddd}.delete-btn{background:#fee!important;color:#c00!important}.delete-btn:hover{background:#fcc!important}.empty-state{text-align:center;color:#999;font-style:italic;padding:2rem}