.role-details { --team-accent: #94a3b8; }
.role-details--mafia { --team-accent: #dc3545; }
.role-details--citizen { --team-accent: #1686d9; }
.role-details--mafia .role-team-badge { background: #fff1f2; border-color: #fecdd3; color: #b42335; }
.role-details--citizen .role-team-badge { background: #eff8ff; border-color: #bfdbfe; color: #1269a8; }
.role-details .role-catalog__hero h1 { color: #fff; overflow-wrap: anywhere; }
.role-details .role-catalog__heading { min-width: 0; }
.role-details .role-catalog__heading > div { min-width: 0; }
.role-details .role-catalog__hero-actions { flex-shrink: 0; flex-wrap: wrap; }
.role-details .role-create-button { background: #fff; color: #283a91; }
.role-details__back { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); border-radius: .7rem; color: #fff; padding: .65rem 1rem; }
.role-details__back:hover, .role-details__back:focus { background: rgba(255, 255, 255, .2); color: #fff; }
.role-details__card { background: #fff; border: 1px solid var(--role-border); border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .06); min-width: 0; padding: 1.4rem; }
.role-details__description { border-inline-start: 4px solid var(--team-accent); margin-bottom: 1rem; }
.role-details__card-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.role-details__heading { align-items: center; display: flex; gap: .7rem; }
.role-details__heading h2 { color: var(--role-ink); font-size: 1.05rem; font-weight: 800; margin: 0; }
.role-details__icon { align-items: center; background: #eef2ff; border-radius: .7rem; color: #4257c9; display: inline-flex; flex: 0 0 2.6rem; height: 2.6rem; justify-content: center; }
.role-details__icon--resistance { background: #eaf7f3; color: #23866b; }
.role-details__text { color: #475569; line-height: 2; margin: 1rem 0 0; overflow-wrap: anywhere; white-space: pre-line; }
.role-details__grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.role-details__versions { margin-top: 1rem; }
.role-details__versions .role-version-list { margin-top: 1rem; }
.role-details__versions .role-details__text { margin-top: .5rem; }
.role-details__versions .role-version-title strong { overflow-wrap: anywhere; }
.role-details__delete { align-items: center; border-top: 1px solid var(--role-border); color: var(--role-muted); display: flex; flex-wrap: wrap; font-size: .85rem; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; }
.role-details__delete .btn { border-radius: .65rem; flex-shrink: 0; }
@media (max-width: 767.98px) {
    .role-details__grid { grid-template-columns: minmax(0, 1fr); }
    .role-details__card { padding: 1rem; }
    .role-details .role-catalog__hero-actions { width: 100%; }
    .role-details .role-catalog__hero-actions .btn { flex: 1; }
}