body {

    margin: 0;

    background: #f4f6f9;

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

}

.container{

    width:95%;

    max-width:1300px;

    margin:40px auto;

}

header{

    text-align:center;

    margin-bottom:25px;

}

header h1{

    margin:0;

    color:#1f2937;

}

header p{

    color:#6b7280;

}

table{

    width:100%;

    border-collapse:collapse;

    background:white;

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

thead{

    background:#1f2937;

    color:white;

}

th{

    padding:14px;

}

td{

    padding:12px;

    border-bottom:1px solid #e5e7eb;

    text-align:center;

}

tbody tr:hover{

    background:#f9fafb;

}

.online{

    color:#16a34a;

    font-weight:bold;

}

.offline{

    color:#dc2626;

    font-weight:bold;

}

/* ---------------- Buttons ---------------- */

button{

    background:#2563eb;

    color:white;

    border:none;

    border-radius:6px;

    padding:8px 14px;

    margin:2px;

    cursor:pointer;

    transition:.2s;

    font-size:14px;

}

button:hover{

    background:#1d4ed8;

}

button:disabled{

    background:#9ca3af;

    cursor:not-allowed;

}
.dashboard{

    display:flex;

    gap:20px;

    margin-bottom:30px;

}

.card{

    flex:1;

    background:white;

    border-radius:10px;

    padding:20px;

    text-align:center;

    box-shadow:0 4px 10px rgba(0,0,0,.08);

}

.card h3{

    margin:0;

    color:#374151;

}

.card span{

    display:block;

    margin-top:15px;

    font-size:42px;

    font-weight:bold;

    color:#2563eb;

}

/* ---------------- Modal ---------------- */

.modal-overlay{

    display:none;

    position:fixed;

    inset:0;

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

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.modal{

    width:700px;

    max-width:95%;

    background:white;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    animation:fadeIn .2s ease;

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    background:#1f2937;

    color:white;

}

.modal-header h2{

    margin:0;

}

.close-button{

    background:transparent;

    font-size:20px;

    padding:0 10px;

}

.close-button:hover{

    background:#374151;

}

.modal-body{

    padding:20px;

}

.modal-body label{

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:bold;

}

.modal-body textarea{

    width:100%;

    height:70px;

    resize:none;

    font-family:monospace;

    font-size:15px;

    padding:10px;

    border:1px solid #d1d5db;

    border-radius:6px;

    background:#f8fafc;

    box-sizing:border-box;

}

.modal-footer{

    padding:18px;

    display:flex;

    justify-content:flex-end;

    gap:10px;

    border-top:1px solid #e5e7eb;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:scale(.95);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}