body {
    background: linear-gradient(120deg,#f5f7fa 0%,#c3cfe2 100%);
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
}
.fade-in {
    animation: fadeIn 0.7s cubic-bezier(.47,1.64,.41,.8);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: none; }
}
.main-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 34px 0 rgba(52,60,100,.10);
    padding: 2.3rem 2rem 2rem 2rem;
    margin-bottom: 2rem;
    border: 1px solid #ebeff5;
    transition: box-shadow .3s;
}
.main-card:hover,.main-card:focus-within {
    box-shadow: 0 20px 54px 0 rgba(44,72,120,.19);
}
.page-title {
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #304663;
    margin-bottom: 1.2rem;
}
.subtitle {
    font-size: 1.09rem;
    color: #788fa2;
    margin-bottom: 0.7rem;
}
.filter-area {
    background: #f8fafc;
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 rgba(31,53,120,0.07);
    padding: 1.1rem 1rem;
    margin-bottom: 1.3rem;
    transition: background 0.2s;
}
.form-label {
    font-weight: 600;
    color: #28354d;
}
input.form-control, select.form-select {
    border-radius: 8px;
    border: 1px solid #e2e7ef;
    background: #f6f8fa;
    transition: border-color 0.15s, background 0.2s;
}
input.form-control:focus, select.form-select:focus {
    border-color: #304663;
    background: #fff;
}
.export-btns .btn {
    margin-right: 0.11em;
    min-width: 94px;
    font-weight: 600;
    transition: box-shadow 0.18s, background 0.2s;
    border-radius: 8px;
    box-shadow: 0 2px 7px rgba(45,50,110,.07);
}
.export-btns .btn:hover,.export-btns .btn:focus {
    box-shadow: 0 5px 14px rgba(55,113,220,.12);
}
.table-section {
    margin: 0;
}
.table {
    border-radius: 11px;
    overflow: hidden;
    border-collapse: separate;
    background: #fff;
}
.table th {
    background: #304663;
    color: #fff;
    font-weight: 700;
    font-size: 1.04rem;
    border: none;
    top: 0;
    position: sticky;
    z-index: 2;
}
.table tbody tr {
    transition: box-shadow 0.17s, background 0.19s;
}
.table tbody tr:hover {
    background: #e5f0fc !important;
    box-shadow: 0 2px 18px 0 rgba(55,103,180,0.07);
}
.table td, .table th {
    vertical-align: middle;
    padding: 0.65rem 0.7rem;
    border-color: #edf2fa;
}
.badge {
    border-radius: 8px;
    font-size: .98em;
    padding: 0.43em 0.88em;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge.bg-success {
    background: linear-gradient(90deg, #36d399 0, #38b000 100%) !important;
    color: #fff;
}
.badge.bg-danger {
    background: linear-gradient(90deg, #fa5252 0, #ef233c 100%)!important;
    color: #fff;
}
.badge.bg-secondary {
    background: #506174 !important;
    color: #fff;
}
.badge.bg-light {
    background: #effafd !important;
    color: #28354d !important;
}
.pagination .page-link {
    color: #304663;
    font-weight: 650;
    border-radius: 7px !important;
}
.pagination .active .page-link {
    background: #304663;
    border-color: #304663;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 2px 8px 0 #b7c7e4;
}
.pagination .page-link:hover {
    background: #e0e8f7;
    color: #28354d;
}
::-webkit-scrollbar {
    height: 10px;
    background: #f6f8fa;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb {
    background: #c7d1e4;
    border-radius: 8px;
}
@media (max-width: 991.98px) {
    .main-card { padding: 1.1rem 0.6rem; }
}
@media (max-width: 767px) {
    .main-card { padding: .9rem 0.2rem; }
    .table th,.table td{font-size: 0.93rem;}
    .filter-area{flex-direction: column;gap:1rem;}
}
@media (max-width: 575px) {
    .table th,.table td{font-size: 0.91rem;padding:0.47rem 0.22rem;}
    .main-card,.page-title,.subtitle{margin-bottom:8px;}
}
.page-footer {
    text-align: center;
    color: #929daf;
    font-size: 0.97em;
    margin: 2.3rem 0 0.5rem 0;
}