.bl-banner {
    max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px);
}
.bl-banner-inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    border: 1px solid var(--line); border-radius: 4px; background: rgba(220, 60, 60, 0.06);
    padding: 10px 16px; font-size: 0.82rem; color: var(--text);
}
.bl-banner b { color: var(--accent); }
.bl-banner a { font-family: 'Roboto', sans-serif; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; margin-left: auto; }

.bl-filters {
    border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
    box-shadow: var(--shadow); padding: 16px 18px; margin-bottom: 20px;
}
.bl-filters form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.bl-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 130px; }
.bl-field label {
    font-family: 'Roboto', sans-serif; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--muted-2);
}
.bl-field input, .bl-field select {
    background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px;
    color: var(--text); font-family: 'Roboto', sans-serif; font-size: 0.86rem;
    padding: 8px 10px; outline: none; transition: border-color .15s;
}
.bl-field input:focus, .bl-field select:focus { border-color: var(--accent); }
.bl-field input::placeholder { color: var(--muted-2); }
.bl-filter-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.bl-btn {
    font-family: 'Roboto', sans-serif; font-size: 0.74rem; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; border-radius: 4px; cursor: pointer;
    padding: 9px 18px; border: 1px solid transparent; transition: all .15s; white-space: nowrap;
}
.bl-btn-primary { background: var(--accent); color: #fff; }
.bl-btn-primary:hover { background: var(--accent-bright); color: #fff; }
.bl-btn-ghost { background: rgba(220, 60, 60, 0.06); border-color: var(--line); color: var(--text); }
.bl-btn-ghost:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.bl-table-wrap { overflow-x: auto; }
.bl-table { min-width: 820px; }
.bl-table td { color: var(--text); }

.bl-click {
    cursor: pointer; color: var(--text); border-bottom: 1px dashed var(--line-soft); transition: color .15s;
    text-decoration: none;
}
.bl-click:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }
.bl-mono { font-family: 'Roboto', sans-serif; font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.bl-name-cell { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-reason-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* Ban-count pill: gray (1), amber (2), red (3+) */
.bl-bancount {
    display: inline-block; margin-left: 6px; font-family: 'Roboto', sans-serif; font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--line-soft); border-radius: 3px; padding: 2px 6px;
    transition: all .15s; vertical-align: middle; text-decoration: none;
}
.bl-bancount:hover { color: #fff; background: var(--accent); border-color: var(--accent); }
.bl-bancount-warn { color: #cc9922; border-color: rgba(204, 153, 34, 0.55); background: rgba(204, 153, 34, 0.12); }
.bl-bancount-warn:hover { color: #080a0d; background: #cc9922; border-color: #cc9922; }
.bl-bancount-danger { color: #fff; border-color: var(--accent); background: var(--accent); font-weight: 700; }
.bl-bancount-danger:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

.bl-badge {
    display: inline-block; font-family: 'Roboto', sans-serif; font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid; border-radius: 3px; padding: 3px 8px;
    white-space: nowrap;
}
.bl-badge-active   { color: var(--accent); border-color: var(--accent); background: rgba(220, 60, 60, 0.08); }
.bl-badge-expired  { color: var(--muted); border-color: var(--line-soft); }
.bl-badge-unbanned { color: var(--green); border-color: var(--green); background: rgba(56, 200, 56, 0.08); }

.bl-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 24px; }
.bl-page {
    font-family: 'Roboto', sans-serif; font-size: 0.76rem; font-weight: 700;
    min-width: 34px; text-align: center; padding: 7px 10px; border-radius: 4px;
    border: 1px solid var(--line-soft); color: var(--muted); text-decoration: none; transition: all .15s;
}
.bl-page:hover { color: var(--text); border-color: var(--line); }
.bl-page.current { background: var(--accent); border-color: var(--accent); color: #080a0d; }
.bl-page.dots { border: none; color: var(--muted-2); padding: 7px 4px; }
.bl-page.disabled { opacity: 0.35; pointer-events: none; }

@media (max-width: 760px) {
    .bl-field { flex: 1 1 100%; }
}