body{
    margin:0;
    font-family:'Segoe UI';
    background:#070b1f;
    color:white;
}

.container{
    text-align:center;
    padding:30px;
}

h1{
    color:#8ea2ff;
    font-size:40px;
}

.subtitle{
    opacity:0.7;
}

.card{
    background:#111936;
    padding:20px;
    border-radius:14px;
    margin:20px auto;
    width:90%;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

input{
    padding:10px;
    margin:8px;
    border-radius:8px;
    border:none;
    background:#1c244f;
    color:white;
}

button{
    padding:10px 20px;
    margin:10px;
    border:none;
    border-radius:8px;
    background:linear-gradient(45deg,#6c7cff,#b86cff);
    color:white;
    cursor:pointer;
}

.grid5{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.grid3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-top:10px;
}

.grid4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.box{
    background:#141c3d;
    padding:15px;
    border-radius:10px;
}

.kcard{
    border:1px solid #2cffb3;
    border-radius:12px;
    padding:15px;
    background:#0f1a2d;
    text-align:left;
}

.badge{
    background:#00c853;
    padding:4px 10px;
    border-radius:8px;
    font-size:12px;
}

.info{
    background:#18264a;
    border-left:4px solid #3aa0ff;
    text-align:left;
}

.info ul{
    padding-left:20px;
}

.info li{
    margin:8px 0;
}