:root {
     --csl-primary: #111827;
     --csl-primary-light: #2563eb;
     --csl-border: #e5e7eb;
     --csl-muted: #6b7280;
     --csl-bg-soft: #f9fafb;
     --csl-success-bg: #edfdf3;
     --csl-success-border: #b7ebc6;
     --csl-success-text: #166534;
     --csl-error-bg: #fff1f2;
     --csl-error-border: #fecdd3;
     --csl-error-text: #b42318;
}

.csl-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     padding: 10px 16px;
     border-radius: 10px;
     border: 1px solid transparent;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     text-decoration: none;
}

.csl-btn-primary {
     background: var(--csl-primary);
     color: #fff;
}

.csl-btn-primary:hover {
     opacity: 0.92;
}

.csl-btn-secondary {
     background: #fff;
     border-color: var(--csl-border);
     color: #111827;
}

.csl-btn-secondary:hover {
     background: var(--csl-bg-soft);
}

.csl-btn-danger {
     background: #ef4444;
     color: #fff;
}

.csl-btn-danger:hover {
     opacity: 0.92;
}

.csl-table-wrap {
     width: 100%;
     overflow-x: auto;
}

.csl-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 720px;
}

.csl-table th,
.csl-table td {
     padding: 12px 14px;
     border-bottom: 1px solid var(--csl-border);
     font-size: 14px;
     line-height: 1.4;
}

.csl-table th {
     background: var(--csl-bg-soft);
     text-align: left;
     font-weight: 700;
     color: #374151;
}

.csl-table td {
     color: #111827;
}

.csl-table tr:hover td {
     background: #fcfcfd;
}

.csl-pagination {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     margin-top: 14px;
     flex-wrap: wrap;
}

.csl-page {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 36px;
     height: 36px;
     padding: 0 10px;
     border-radius: 8px;
     border: 1px solid var(--csl-border);
     background: #fff;
     color: #111827;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
}

.csl-page:hover {
     background: var(--csl-bg-soft);
}

.csl-page.is-active {
     background: var(--csl-primary);
     color: #fff;
     border-color: var(--csl-primary);
}

.csl-badge-active {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 999px;
     background: var(--csl-success-bg);
     border: 1px solid var(--csl-success-border);
     color: var(--csl-success-text);
     font-size: 12px;
     font-weight: 700;
}

.csl-badge-inactive {
     display: inline-block;
     padding: 4px 10px;
     border-radius: 999px;
     background: var(--csl-error-bg);
     border: 1px solid var(--csl-error-border);
     color: var(--csl-error-text);
     font-size: 12px;
     font-weight: 700;
}

.csl-toolbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin-bottom: 12px;
     flex-wrap: wrap;
}

.csl-filter {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
}

.csl-filter input,
.csl-filter select {
     min-height: 36px;
     padding: 6px 10px;
     border-radius: 8px;
     border: 1px solid var(--csl-border);
     font-size: 14px;
}

.csl-filter input:focus,
.csl-filter select:focus {
     outline: none;
     border-color: var(--csl-primary-light);
     box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

@media (max-width: 768px) {

     .csl-toolbar {
          flex-direction: column;
          align-items: stretch;
     }

     .csl-pagination {
          justify-content: flex-start;
     }
}