body {

    margin:0;
    padding:0;

    background:#0f1722;
    color:#f1f5f9;

    font-family:Arial, Helvetica, sans-serif;

}

header{

    background:#182433;

    padding:20px;

    border-bottom:3px solid #3b82f6;
}

header h1{

     margin:0;
     font-size:36px;

}

header h2{

    margin:5px 0 0 0;
    color:#9fb7d7;
    font-weight:normal;

}

#status{

    float:right;

    margin-top:-45px;

    font-size:20px;

    font-weight:bold;

    color:#6ee7b7;
}

.dashboard-status{
    text-align:right;
    font-size:14px;
    color:#ccc;
    margin-bottom:12px;
}

.dashboard-status span{
    margin-left:10px;
}

.container{
    display:grid;

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

    gap:20px;

    padding:20px;
}


.card{ 

    background:#182433;

    border-radius:12px;

    padding:20px;

    min-height:220px;

    box-shadow:0 0 18px 

    rgba(0,0,0,.45);

}

.card h3{

    margin-top:0;

    border-bottom:1px solid #334155;

    padding-bottom:10px;

}

footer{

    text-align:center;

    color:#94a3b8;

    padding:20px;

}