.role-catalog {
    --role-border: #e2e8f0;
    --role-ink: #172033;
    --role-muted: #64748b;
    --role-primary: #4257c9;
    color: var(--role-ink);
    text-align: right;
}

.role-catalog__hero {
    align-items: center;
    background: radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .16), transparent 28%), linear-gradient(135deg, #202b55 0%, #3549a8 58%, #5268d9 100%);
    border-radius: 1.15rem;
    box-shadow: 0 1rem 2.5rem rgba(31, 42, 85, .18);
    color: #fff;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    overflow: hidden;
    padding: 1.4rem 1.6rem;
    position: relative;
}

.role-catalog__heading,
.role-catalog__hero-actions { align-items: center; display: flex; gap: 1rem; }
.role-catalog__icon {
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 1rem;
    display: inline-flex;
    flex: 0 0 4rem;
    font-size: 1.75rem;
    height: 4rem;
    justify-content: center;
}
.role-catalog__eyebrow { color: #cbd5ff; display: block; font-size: .78rem; font-weight: 700; letter-spacing: .04em; margin-bottom: .2rem; }
.role-catalog__hero h1 { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 800; margin: 0; }
.role-catalog__hero p { color: #e2e7ff; margin: .3rem 0 0; }
.role-catalog__total { background: rgba(15, 23, 42, .24); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: .5rem .8rem; white-space: nowrap; }
.role-catalog__total strong { font-size: 1.1rem; }
.role-create-button { background: #fff; border: 0; border-radius: .7rem; box-shadow: 0 .45rem 1rem rgba(15, 23, 42, .18); color: #283a91; font-weight: 700; padding: .65rem 1rem; }
.role-create-button:hover, .role-create-button:focus { background: #f3f5ff; color: #182667; }

.role-catalog__hint { align-items: center; background: #f0f4ff; border: 1px solid #d9e1ff; border-radius: .75rem; color: #445079; display: flex; gap: .55rem; margin-bottom: 1rem; padding: .65rem .85rem; }
.role-catalog__hint i { color: var(--role-primary); }
.role-catalog__filters { align-items: center; display: flex; gap: .65rem; margin-bottom: 1rem; }
.role-catalog__filters label { color: var(--role-muted); font-weight: 700; margin: 0; }
.role-team-filter { background: #fff; border: 1px solid #cfd7e6; border-radius: .55rem; color: var(--role-ink); max-width: 100%; min-height: 2.5rem; min-width: 10rem; padding: .35rem .6rem; }
.role-team-filter:focus-visible { outline: 3px solid rgba(66, 87, 201, .25); outline-offset: 2px; }
.role-table-shell { background: #fff; border: 1px solid var(--role-border); border-radius: 1rem; box-shadow: 0 .65rem 1.8rem rgba(15, 23, 42, .07); overflow-x: auto; overflow-y: hidden; padding: .35rem 1rem 1rem; }
.role-table { border-collapse: separate !important; border-spacing: 0 .55rem !important; margin: 0 !important; min-width: 920px; table-layout: fixed; width: 100% !important; }
.role-col-primary { width: 20%; }
.role-col-description { width: 40%; }
.role-col-team { width: 12%; }
.role-col-activity, .role-col-resistance { width: 14%; }
.role-table thead th { border: 0 !important; color: var(--role-muted); font-size: .78rem; font-weight: 700; padding: .8rem .7rem !important; white-space: nowrap; }
.role-table tbody > tr:not(.role-versions-row) { --team-accent: #94a3b8; background: #fff; box-shadow: 0 .2rem .8rem rgba(15, 23, 42, .065); transition: box-shadow .18s ease; }
.role-table tbody > tr.mafia { --team-accent: #dc3545; }
.role-table tbody > tr.citizen { --team-accent: #1686d9; }
.role-table tbody > tr:not(.role-versions-row):hover { box-shadow: 0 .55rem 1.25rem rgba(15, 23, 42, .12); }
.role-table tbody > tr:not(.role-versions-row) > td { background: #fff; border-bottom: 1px solid var(--role-border) !important; border-top: 1px solid var(--role-border) !important; padding: .9rem .7rem !important; vertical-align: middle; }
.role-table tbody > tr:not(.role-versions-row) > td:first-child { border-right: 4px solid var(--team-accent) !important; border-radius: 0 .75rem .75rem 0; }
.role-table tbody > tr:not(.role-versions-row) > td:last-child { border-left: 1px solid var(--role-border) !important; border-radius: .75rem 0 0 .75rem; }

.role-name { align-items: center; display: flex; gap: .65rem; min-width: 10rem; }
.role-name strong { color: #182033; font-size: 1rem; }
.role-name-menu { min-width: 0; }
.role-name-button { align-items: center; background: transparent; border: 0; color: #182033; cursor: pointer; display: inline-flex; gap: .45rem; max-width: 100%; padding: .3rem .15rem; text-align: right; }
.role-name-button:hover, .role-name-button:focus { color: var(--role-primary); outline: 0; }
.role-name-button:focus-visible { border-radius: .35rem; box-shadow: 0 0 0 3px rgba(66, 87, 201, .2); }
.role-name-menu__items { border: 1px solid #dce3ef; border-radius: .7rem; box-shadow: 0 .8rem 2rem rgba(15, 23, 42, .16); min-width: 13rem; overflow: hidden; padding: .35rem; text-align: right; z-index: 1080; }
.role-table tbody > tr:focus-within > .role-primary-cell,
.role-table tbody > tr:hover > .role-primary-cell { position: relative; z-index: 1070; }
.role-table tbody > tr.role-menu-open { position: relative; z-index: 1090; }
.role-table tbody > tr.role-menu-open > td { position: relative; z-index: 1090; }
.role-table tbody > tr.role-menu-open > .role-primary-cell { z-index: 1100; }
.role-name-menu__items .dropdown-item { align-items: center; border-radius: .4rem; color: #475569; display: flex; gap: .55rem; padding: .55rem .65rem; text-align: right; }
.role-name-menu__items .dropdown-item i { color: #718096; text-align: center; width: 1.1rem; }
.role-name-menu__items .dropdown-item:hover, .role-name-menu__items .dropdown-item:focus { background: #eef2ff; color: #293d9b; }
.role-name-menu__items form { margin: 0; }
.role-name-menu__delete { border: 0; width: 100%; }
.role-name-menu__items .role-name-menu__delete, .role-name-menu__items .role-name-menu__delete i { color: #c52b3d; }
.role-name-menu__items .role-name-menu__delete:hover, .role-name-menu__items .role-name-menu__delete:focus { background: #fff1f2; color: #a51f31; }
.role-versions-toggle { align-items: center; background: #f8fafc; border: 1px solid var(--team-accent); border-radius: .65rem; color: var(--team-accent); display: inline-flex; flex: 0 0 2.25rem; height: 2.25rem; justify-content: center; transition: background .18s ease, transform .18s ease; width: 2.25rem; }
.role-versions-toggle:hover { background: #f1f5f9; transform: scale(1.04); }
.role-versions-toggle[aria-expanded="true"] { background: var(--team-accent); color: #fff; }
.role-versions-toggle:focus-visible { outline: 3px solid rgba(66, 87, 201, .3); outline-offset: 2px; }
.role-version-count { align-items: center; color: var(--role-muted); display: flex; font-size: .8rem; gap: .35rem; margin: .38rem 0 0; }
.role-description { color: #3f4b5f; font-size: .96rem; line-height: 1.9; overflow-wrap: anywhere; }
.role-team-badge { align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px; color: #475569; display: inline-flex; gap: .35rem; padding: .35rem .65rem; white-space: nowrap; }
.role-detail-text { color: #475569; display: inline; line-height: 1.7; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.mafia .role-team-badge { background: #fff1f2; border-color: #fecdd3; color: #b42335; }
.citizen .role-team-badge { background: #eff8ff; border-color: #bfdbfe; color: #1269a8; }

.role-versions-row > td { border: 0 !important; padding: 0 .7rem .65rem !important; }
.role-versions { background: linear-gradient(135deg, #f8faff, #f6f8fc); border: 1px solid #dfe5f3; border-radius: .8rem; box-shadow: inset 4px 0 0 var(--team-accent, #718096); padding: 1rem 1.25rem; }
.role-versions__heading { align-items: center; display: flex; gap: .7rem; margin-bottom: .8rem; }
.role-versions__icon { align-items: center; background: #e8edff; border-radius: .55rem; color: var(--role-primary); display: inline-flex; height: 2.25rem; justify-content: center; width: 2.25rem; }
.role-versions__heading span { color: var(--role-muted); font-size: .75rem; }
.role-versions__heading h2 { font-size: 1rem; font-weight: 800; margin: .1rem 0 0; }
.role-version-list { list-style: none; margin: 0; padding: 0; }
.role-version-list li { border-top: 1px solid #e1e6f0; padding: .8rem 0; }
.role-version-list li:first-child { border-top: 0; }
.role-version-title { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: .3rem; }
.role-version-badge { background: #fff; border: 1px solid #dce3f2; border-radius: 999px; color: #506083; font-size: .75rem; padding: .2rem .55rem; }

.role-catalog .dataTables_wrapper .dataTables_length, .role-catalog .dataTables_wrapper .dataTables_filter { color: var(--role-muted); margin: .65rem 0 .25rem; }
.role-catalog .dataTables_wrapper .dataTables_filter { text-align: left; }
.role-catalog .dataTables_wrapper .dataTables_filter input, .role-catalog .dataTables_wrapper .dataTables_length select { border: 1px solid #cfd7e6; border-radius: .55rem; min-height: 2.25rem; }
.role-catalog .dataTables_wrapper .dataTables_filter input { margin-left: 0; margin-right: .5rem; padding: .35rem .6rem; }
.role-catalog .dataTables_wrapper .dataTables_info { color: var(--role-muted); padding-top: 1rem; }
.role-catalog .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: .45rem !important; }
.role-table-shell::-webkit-scrollbar { height: .65rem; }
.role-table-shell::-webkit-scrollbar-track { background: #edf2f7; border-radius: 999px; }
.role-table-shell::-webkit-scrollbar-thumb { background: #a8b4ca; border-radius: 999px; }

@media (max-width: 767.98px) {
    .role-catalog__hero { align-items: stretch; flex-direction: column; gap: 1rem; padding: 1.15rem; }
    .role-catalog__icon { flex-basis: 3.25rem; font-size: 1.4rem; height: 3.25rem; }
    .role-catalog__hero-actions { justify-content: space-between; }
    .role-create-button { flex: 1; text-align: center; }
    .role-catalog__hint { align-items: flex-start; font-size: .88rem; }
    .role-table-shell { padding: .25rem .6rem .75rem; }
    .role-catalog .dataTables_wrapper .dataTables_filter, .role-catalog .dataTables_wrapper .dataTables_length { text-align: right; width: 100%; }
    .role-catalog .dataTables_wrapper .dataTables_filter input { box-sizing: border-box; margin: .35rem 0 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .role-table tbody > tr, .role-versions-toggle { transition: none; }
}