.userlist-avatar,
.avatar_small,
.team-member .member-img img {
    border-radius: var(--bs-border-radius);
    object-fit: cover;
}

.nx-userlist-card,
.nx-userlist-card > .card-body,
.nx-userlist-card .team-member {
    background: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
    border-color: var(--nx-theme-card-border, var(--bs-border-color)) !important;
}

.nx-userlist-card .card-body,
.nx-userlist-card .nx-userlist-item,
.nx-userlist-card .nx-userlist-item > * {
    background: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
}

.nx-userlist-card .list-group,
.nx-userlist-card .list-group-item,
.nx-userlist-card .table,
.nx-userlist-card .table-responsive,
.nx-userlist-card .table > :not(caption) > * > *,
.nx-userlist-card .row,
.nx-userlist-card .row > [class*="col-"],
.nx-userlist-card .team-member .member-info,
.nx-userlist-card .team-member .member-img,
.nx-userlist-card .team-member .social {
    background: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
    border-color: var(--nx-theme-card-border, var(--bs-border-color)) !important;
}

.nx-userlist-card .list-group-item,
.nx-userlist-card .table > :not(caption) > * > *,
.nx-userlist-card .team-member .member-info {
    box-shadow: none !important;
}

.nx-userlist-card .list-group-item {
    --bs-list-group-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-list-group-color: var(--nx-theme-text, inherit);
    --bs-list-group-border-color: var(--nx-theme-card-border, var(--bs-border-color));
    background-color: var(--nx-theme-surface-2, var(--bs-body-bg)) !important;
    color: var(--nx-theme-text, inherit) !important;
}

.nx-userlist-card .table {
    --bs-table-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-striped-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-active-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-hover-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --bs-table-color: var(--nx-theme-text, inherit);
    --bs-table-border-color: var(--nx-theme-card-border, var(--bs-border-color));
}

.nx-userlist-card .userlist-filter .form-control,
.nx-userlist-card .userlist-filter .form-select {
    background-color: color-mix(in srgb, var(--nx-color-card-bg, var(--nx-theme-surface-2, var(--bs-body-bg))) 94%, var(--nx-color-on-surface, var(--nx-theme-text, var(--bs-body-color))) 6%) !important;
    border-color: color-mix(in srgb, var(--nx-color-card-border, var(--nx-theme-card-border, var(--bs-border-color))) 68%, transparent) !important;
    color: var(--nx-color-on-surface, var(--nx-theme-text, var(--bs-body-color))) !important;
    box-shadow: none !important;
}

.nx-userlist-card .userlist-filter .form-control::placeholder {
    color: var(--nx-color-muted, var(--bs-secondary-color)) !important;
    opacity: 1;
}

.nx-userlist-card .userlist-filter .form-control:focus,
.nx-userlist-card .userlist-filter .form-select:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--nx-color-card-border, var(--nx-theme-card-border, var(--bs-border-color))) 45%) !important;
    box-shadow: 0 0 0 .16rem color-mix(in srgb, var(--bs-primary) 18%, transparent) !important;
}

.nx-userlist-card .userlist-filter .form-select {
    appearance: none;
    background-image: none !important;
    padding-right: 2.25rem;
}

.nx-userlist-card .userlist-filter .nx-userlist-select-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.nx-userlist-card .userlist-filter .nx-userlist-select-wrap .form-select {
    width: auto;
}

.nx-userlist-card .userlist-filter .nx-userlist-select-icon {
    position: absolute;
    top: 50%;
    right: .85rem;
    transform: translateY(-50%);
    color: var(--nx-color-on-surface, var(--nx-theme-text, var(--bs-body-color))) !important;
    font-size: .9rem;
    opacity: .9;
    pointer-events: none;
}

.nx-userlist-team-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.nx-squad-page {
    --nx-squad-bg: var(--nx-theme-surface-2, var(--bs-body-bg));
    --nx-squad-card: color-mix(in srgb, var(--nx-theme-surface-2, var(--bs-body-bg)) 92%, var(--nx-theme-text, #111827) 8%);
    --nx-squad-border: color-mix(in srgb, var(--nx-theme-card-border, var(--bs-border-color)) 76%, transparent);
    --nx-squad-text: var(--nx-theme-text, var(--bs-body-color));
    --nx-squad-muted: var(--nx-color-muted, var(--bs-secondary-color));
    width: 100%;
    max-width: none;
    margin: 2rem 0;
    padding: 0 0 2rem;
    color: var(--nx-squad-text);
}

.nx-squad-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid var(--nx-squad-border);
    border-radius: .75rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 22%, transparent), transparent 44%),
        var(--nx-squad-card);
    box-shadow: 0 18px 50px color-mix(in srgb, #000 12%, transparent);
}

.nx-squad-kicker {
    margin: 0 0 .65rem;
    color: var(--bs-primary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nx-squad-hero h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
}

.nx-squad-copy {
    max-width: 680px;
    margin: 1rem 0 0;
    color: var(--nx-squad-muted);
    font-size: 1.05rem;
}

.nx-squad-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(92px, 1fr));
    gap: .75rem;
}

.nx-squad-stats div {
    min-width: 100px;
    padding: 1rem;
    border: 1px solid var(--nx-squad-border);
    border-radius: .6rem;
    background: color-mix(in srgb, var(--nx-squad-bg) 72%, transparent);
}

.nx-squad-stats strong {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
}

.nx-squad-stats span {
    display: block;
    margin-top: .35rem;
    color: var(--nx-squad-muted);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.nx-squad-toolbar {
    display: grid;
    grid-template-columns: minmax(210px, 1.4fr) minmax(180px, 1fr) minmax(150px, .8fr) auto auto;
    gap: .75rem;
    align-items: end;
    margin: 1rem 0 1.25rem;
    padding: 1rem;
    border: 1px solid var(--nx-squad-border);
    border-radius: .7rem;
    background: var(--nx-squad-card);
}

.nx-squad-toolbar label {
    display: grid;
    gap: .35rem;
    margin: 0;
}

.nx-squad-toolbar label span {
    color: var(--nx-squad-muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.nx-squad-toolbar input,
.nx-squad-toolbar select {
    width: 100%;
    min-height: 42px;
    padding: .55rem .75rem;
    border: 1px solid var(--nx-squad-border);
    border-radius: .45rem;
    background: color-mix(in srgb, var(--nx-squad-bg) 88%, var(--nx-squad-text) 4%);
    color: var(--nx-squad-text);
}

.nx-squad-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    justify-content: center;
}

.nx-squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.nx-squad-card {
    overflow: hidden;
    border: 1px solid var(--nx-squad-border);
    border-radius: .75rem;
    background: var(--nx-squad-card);
    box-shadow: 0 12px 32px color-mix(in srgb, #000 9%, transparent);
}

.nx-squad-card-image {
    position: relative;
    height: 290px;
    min-height: 290px;
    max-height: 290px;
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--bs-primary) 26%, transparent), transparent 30%),
        radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--nx-squad-text) 12%, transparent), transparent 28%),
        linear-gradient(135deg, color-mix(in srgb, var(--nx-squad-bg) 76%, #000 14%), color-mix(in srgb, var(--nx-squad-card) 86%, var(--bs-primary) 14%));
}

.nx-squad-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, .72) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .52) 0%, transparent 62%);
    pointer-events: none;
}

.nx-squad-card-image img {
    width: 100%;
    height: 100%;
    min-height: 290px;
    max-height: 290px;
    object-fit: cover;
    display: block;
}

.nx-squad-card-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nx-squad-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .28;
}

.nx-squad-card-placeholder i {
    font-size: clamp(4rem, 9vw, 7rem);
    color: #fff;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .25));
}

.nx-squad-card-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    border-bottom: 1px solid var(--nx-squad-border);
}

.nx-squad-card-head--overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    border-bottom: 0;
    color: #fff;
}

.nx-squad-card-head--overlay p {
    color: color-mix(in srgb, var(--bs-primary) 70%, #fff 30%);
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}

.nx-squad-card-head--overlay h3 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.nx-squad-card-head--overlay > span {
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    backdrop-filter: blur(8px);
}

.nx-squad-card-head p {
    margin: 0 0 .25rem;
    color: var(--bs-primary);
    font-size: .74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.nx-squad-card-head h3 {
    margin: 0;
    font-size: 1.35rem;
}

.nx-squad-card-head > span {
    flex: 0 0 auto;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-primary) 18%, transparent);
    color: var(--nx-squad-text);
    font-size: .78rem;
    font-weight: 800;
}

.nx-squad-member-list {
    display: grid;
}

.nx-squad-member {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: .85rem;
    align-items: center;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--nx-squad-border) 70%, transparent);
    color: var(--nx-squad-text);
    text-decoration: none;
}

.nx-squad-member:last-child {
    border-bottom: 0;
}

.nx-squad-member:hover {
    background: color-mix(in srgb, var(--bs-primary) 9%, transparent);
    color: var(--nx-squad-text);
}

.nx-squad-member img {
    width: 44px;
    height: 44px;
    border-radius: .55rem;
    object-fit: cover;
}

.nx-squad-member-main {
    display: grid;
    min-width: 0;
}

.nx-squad-member-main strong,
.nx-squad-member-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nx-squad-member-main small {
    color: var(--nx-squad-muted);
}

.nx-squad-tag,
.nx-squad-status {
    padding: .32rem .5rem;
    border: 1px solid var(--nx-squad-border);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.nx-squad-tag {
    color: var(--nx-squad-muted);
}

.nx-squad-status--active,
.nx-squad-status--staff {
    border-color: color-mix(in srgb, #22c55e 48%, var(--nx-squad-border));
    color: #22c55e;
}

.nx-squad-status--trial {
    border-color: color-mix(in srgb, var(--bs-primary) 58%, var(--nx-squad-border));
    color: var(--bs-primary);
}

.nx-squad-status--inactive {
    color: var(--nx-squad-muted);
}

.nx-squad-empty {
    padding: 2rem;
    border: 1px dashed var(--nx-squad-border);
    border-radius: .75rem;
    background: var(--nx-squad-card);
    color: var(--nx-squad-muted);
    text-align: center;
}

@media (max-width: 991px) {
    .nx-squad-hero,
    .nx-squad-toolbar {
        grid-template-columns: 1fr;
    }

    .nx-squad-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .nx-squad-stats,
    .nx-squad-grid {
        grid-template-columns: 1fr;
    }

    .nx-squad-member {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .nx-squad-tag,
    .nx-squad-status {
        grid-column: 2;
        justify-self: start;
    }
}