body{
    margin:0;
    font-family:Arial;
    text-align:center;
    background:#e3f2fd;
}

.login{
    background:linear-gradient(to right,#64b5f6,#bbdefb);
    height:100vh;
}

.nav{
    background:#1565c0;
    color:white;
    padding:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.dashboard{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}

.panel{
    background:white;
    width:280px;
    margin:15px;
    padding:15px;
    border-radius:12px;
    transition:0.3s;
}

.panel:hover{
    transform:scale(1.05);
}

.card{
    background:white;
    width:280px;
    margin:80px auto;
    padding:20px;
    border-radius:12px;
}

input,button{
    width:90%;
    padding:8px;
    margin-top:8px;
}

button{
    background:#1565c0;
    color:white;
    border:none;
    cursor:pointer;
}

/* ☁ cloud animation */
.cloud{
    position:fixed;
    top:60px;
    width:120px;
    height:50px;
    background:white;
    border-radius:40px;
    animation:cloudmove 18s linear infinite;
}

@keyframes cloudmove{
    from{ left:-150px;}
    to{ left:100%;}
}

#sms{
    display:none;
    background:#fff3cd;
    margin:10px auto;
    width:300px;
    padding:10px;
    border-radius:8px;
}

/* 📱 mobile support */
@media(max-width:600px){
    .panel{
        width:90%;
    }
}