/* Custom CSS */
body{background:linear-gradient(to bottom,#0f1419 0%,#1a1f3a 20%,#2d3561 40%,#3e4a75 60%,#4f5d8e 80%,#6b7db8 100%)}.app-container{position:relative;max-width:500px;margin:0 auto;box-shadow:0 4px 20px rgb(0 0 0 / 25%);min-height:100vh;z-index:9}.custom-anim{opacity:0;transform:translateY(20px) translateZ(0);transition:all 0.6s ease-out}.custom-anim.show{opacity:1;transform:translateY(0) translateZ(0)}@media screen and (min-width:500px){.app-container{margin:5px auto;border-radius:20px;overflow:hidden;min-height:98vh;transform:scale(.95)}}

/* Effect Background for PC */
.moon{position:absolute;top:15%;right:20%;width:80px;height:80px;background:radial-gradient(circle at 30%30%,#fff 0%,#f0f0f0 100%);border-radius:50%;box-shadow:0 0 30px rgba(255,255,255,0.3);animation:moonGlow 3s ease-in-out infinite alternate}.moon::before{content:'';position:absolute;top:20%;left:25%;width:8px;height:8px;background:rgba(200,200,200,0.4);border-radius:50%}.moon::after{content:'';position:absolute;top:50%;left:45%;width:5px;height:5px;background:rgba(200,200,200,0.3);border-radius:50%}
@keyframes moonGlow{0%{box-shadow:0 0 30px rgba(255,255,255,0.3)}
100%{box-shadow:0 0 50px rgba(255,255,255,0.5)}}.star{position:absolute;background:white;border-radius:50%;animation:twinkle 2s infinite}.star.small{width:2px;height:2px;box-shadow:0 0 6px rgba(255,255,255,0.8)}.star.medium{width:3px;height:3px;box-shadow:0 0 10px rgba(255,255,255,0.9)}.star.large{width:4px;height:4px;box-shadow:0 0 15px rgba(255,255,255,1)}
@keyframes twinkle{0%,100%{opacity:1}
50%{opacity:0.3}}.north-star{position:absolute;top:25%;left:75%;width:6px;height:6px;background:#ffffff;border-radius:50%;box-shadow:0 0 20px rgba(255,255,255,1);animation:northStarGlow 2.5s ease-in-out infinite alternate}.north-star::before{content:'';position:absolute;top:50%;left:50%;width:12px;height:2px;background:rgba(255,255,255,0.8);transform:translate(-50%,-50%)rotate(45deg)}.north-star::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:2px;background:rgba(255,255,255,0.8);transform:translate(-50%,-50%)rotate(-45deg)}@keyframes northStarGlow{0%{box-shadow:0 0 20px rgba(255,255,255,1)}100%{box-shadow:0 0 30px rgba(255,255,255,1.2)}}.cloud{position:absolute;background:rgba(255,255,255,0.08);border-radius:50px;opacity:0.4;animation:float 15s infinite ease-in-out}.cloud1{width:100px;height:40px;top:30%;left:10%;animation-delay:0s}.cloud2{width:80px;height:30px;top:40%;right:15%;animation-delay:5s}@keyframes float{0%,100%{transform:translateX(0)translateY(0)}33%{transform:translateX(10px)translateY(-5px)}66%{transform:translateX(-5px)translateY(5px)}}@media (max-width:480px){.moon{top:2%;right:5%}.north-star{top:14%;left:90%}}

/* Custom Login */
.custom-login-header{position:fixed;top:0;left:0;right:0;border-bottom-left-radius:20px;border-bottom-right-radius:20px}.custom-login-header img{width:70px;height:70px;object-fit:contain;margin:0 auto;background:#694a9d;border-radius:100%;position:relative;top:20px}.custom-login-box{position:fixed;bottom:0;left:0;right:0;border-top:1px solid #ddd;padding-top:25px;padding-bottom:25px;border-top-right-radius:20px;border-top-left-radius:20px;max-width:100%}.custom-login-heading p{margin:0 0 20px;text-align:center;font-size:14px;opacity:.8}.custom-login-heading h1{font-weight:700;font-size:25px;text-align:center}