body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f3f6fb;
    color:#17212f;
}
.wrapper{
    width:95%;
    max-width:1400px;
    margin:20px auto;
}
.card{
    background:#ffffff;
    border-radius:14px;
    box-shadow:0 8px 22px rgba(0,0,0,0.08);
    padding:18px;
    margin-bottom:18px;
}
h1,h2,h3{
    margin:0 0 12px 0;
}
.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:18px;
}
table{
    width:100%;
    border-collapse:collapse;
}
table th, table td{
    border:1px solid #d8e0ec;
    padding:10px;
    font-size:14px;
    text-align:left;
}
table th{
    background:#0f5bd3;
    color:#ffffff;
}
.btn{
    display:inline-block;
    padding:10px 14px;
    border:none;
    border-radius:10px;
    background:#0f5bd3;
    color:#ffffff;
    text-decoration:none;
    cursor:pointer;
    font-weight:bold;
}
.btn-secondary{
    background:#58667a;
}
.btn-success{
    background:#118a3f;
}
.btn-danger{
    background:#cf2e2e;
}
.badge{
    display:inline-block;
    padding:6px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}
.badge-green{
    background:#dff7e8;
    color:#118a3f;
}
.badge-red{
    background:#fde5e5;
    color:#b71f1f;
}
.badge-blue{
    background:#e3efff;
    color:#0f5bd3;
}
.form-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
}
.input{
    padding:10px 12px;
    border:1px solid #ccd6e2;
    border-radius:10px;
    min-width:220px;
}
.board{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}
.cell{
    border:1px solid #d8e0ec;
    border-radius:12px;
    padding:12px;
    background:#fafcff;
    min-height:110px;
}
.cell strong{
    display:block;
    margin-bottom:8px;
}
.alert{
    padding:12px 14px;
    border-radius:12px;
    margin-bottom:12px;
}
.alert-info{
    background:#e9f2ff;
    color:#124ea8;
}
.alert-success{
    background:#e4f7e9;
    color:#0f7b36;
}
.alert-danger{
    background:#fde8e8;
    color:#b62020;
}
.flex-between{
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    flex-wrap:wrap;
}
.small{
    font-size:12px;
    color:#617387;
}
.center{
    text-align:center;
}
@media (max-width: 768px){
    .board{
        grid-template-columns:repeat(2,1fr);
    }
    table th, table td{
        font-size:12px;
        padding:8px;
    }
}