.mp-site .zzz-filter[data-api] {
    --directory-ink: #232527;
    --directory-muted: #555b57;
    --directory-line: #c8cac3;
    --directory-paper: #fafaf7;
    --directory-accent: #98430a;
    color: var(--directory-ink);
}

.mp-site .zzz-filter[data-api] .zzz-filter__buttons {
    background: var(--directory-paper);
    border-color: var(--directory-line);
}

.zzz-filter[data-api] .zzz-filter__group-label,
.zzz-filter[data-api] .zzz-filter__subgroup-label {
    color: var(--directory-muted);
    font-size: 14px;
    font-weight: 600;
}

.zzz-filter[data-api] .zzz-filter__buttons-wrap {
    gap: 6px;
}

.mp-site .zzz-filter[data-api] :is(.zzz-filter__btn,.zzz-filter__sort-btn,.zzz-filter__toggle-btn,.zzz-filter__retry) {
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--directory-line);
    border-radius: 6px;
    background: var(--directory-paper);
    color: var(--directory-ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.mp-site .zzz-filter[data-api] :is(.zzz-filter__btn,.zzz-filter__sort-btn,.zzz-filter__toggle-btn,.zzz-filter__retry):hover {
    background: #f2e7db;
    border-color: var(--directory-accent);
}

.mp-site .zzz-filter[data-api] .zzz-filter__btn.is-active {
    background: var(--directory-accent);
    border-color: var(--directory-accent);
    color: #fff;
}

.mp-site .zzz-filter[data-api] .zzz-filter__sort-btn.is-active {
    background: #292b2d;
    border-color: #292b2d;
    color: #fff;
}

.zzz-filter[data-api] :is(button,a):focus-visible {
    outline: 2px solid var(--directory-accent);
    outline-offset: 3px;
}

.zzz-filter[data-api] .zzz-filter__group--keyword {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.zzz-filter[data-api] .zzz-filter__subgroup {
    display: grid;
    grid-template-columns: 80px minmax(0,1fr);
    gap: 8px;
    align-items: start;
    padding-block: 6px;
}

.zzz-filter[data-api] .zzz-filter__subgroup-label {
    padding-block: 10px;
}

.zzz-filter[data-api] .zzz-filter__sort {
    flex-wrap: wrap;
    gap: 6px;
}

.zzz-filter[data-api]:not([data-entity="agents"]) .zzz-filter__results.zzz-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min)), 1fr));
}

.zzz-filter[data-api] .zzz-filter__count {
    color: var(--directory-muted);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    padding-block: 8px;
}

.zzz-filter[data-api] :is(.zzz-filter__loading,.zzz-filter__empty) {
    grid-column: 1 / -1;
    gap: 12px;
    color: var(--directory-muted);
    font-size: 15px;
}

.zzz-filter[data-api] .zzz-filter__empty--error {
    color: #a32c25;
}

.zzz-filter[data-api] .zzz-filter__spinner {
    border-color: var(--directory-line);
    border-top-color: var(--directory-accent);
}

.zzz-filter[data-api] :is(.zzz-filter-card__role,.zzz-filter-card__motif-inline,.zzz-filter-card__stat-label,.zzz-filter-card__effect,.zzz-filter-card--bangboo .zzz-filter-card__attr) {
    color: var(--directory-muted);
}

.zzz-filter[data-api] :is(.zzz-filter-card__meta,.zzz-filter-card__stats) {
    flex-wrap: wrap;
}

@media (max-width:600px) {
    .mp-site .zzz-filter[data-api] .zzz-filter__buttons { padding: 16px; }
    .zzz-filter[data-api] .zzz-filter__subgroup { grid-template-columns: minmax(0,1fr); gap: 4px; }
    .zzz-filter[data-api] .zzz-filter__subgroup-label { padding-block: 4px; }
    .zzz-filter[data-api] .zzz-filter__sort { justify-content: flex-start; }
}

@media (prefers-reduced-motion:reduce) {
    .zzz-filter[data-api] .zzz-filter__spinner { animation: none; }
    .zzz-filter[data-api] :is(button,.zzz-filter-card) { transition: none; }
}