*{
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}


body{

    margin:0;

    min-height:100vh;

    background:
    linear-gradient(
    135deg,
    #111827,
    #1f2937
    );

    color:white;

}



.card{

    width:90%;

    max-width:450px;

    margin:40px auto;

    padding:25px;

    background:
    rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    border-radius:20px;

    border:
    1px solid
    rgba(255,255,255,0.15);

}



h2{

    text-align:center;

}



input,
select{

    width:100%;

    padding:13px;

    margin:8px 0;

    border-radius:12px;

    border:none;

    outline:none;

}



button{


    width:100%;

    padding:13px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:
    linear-gradient(
    90deg,
    #ec4899,
    #8b5cf6
    );

    color:white;

    font-weight:bold;

}



button:hover{

    opacity:.85;

}



.dns-box,
.user-box{


    margin-top:15px;

    padding:15px;

    border-radius:15px;

    background:

    rgba(255,255,255,.08);


}



.navbar{


    width:100%;

    padding:15px;

    display:flex;

    justify-content:space-between;

    align-items:center;


    background:
    rgba(0,0,0,.3);


}



.logo{

    font-weight:bold;

    font-size:20px;

}



.menu a{

    color:white;

    text-decoration:none;

    margin-left:15px;

}



.stat{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;

}



.stat-card{


    padding:20px;

    border-radius:15px;

    background:

    rgba(255,255,255,.1);

    text-align:center;


}



@media(max-width:600px){


.navbar{

    flex-direction:column;

}


.menu{

    margin-top:10px;

}


}