.userlist-page-shell,
.userlist-page-head,
.nx-member-directory {
    --ul-card: var(--nx-component-card-bg, var(--nx-color-card-bg, var(--bs-card-bg, var(--nx-color-surface, #fff))));
    --ul-soft: var(--nx-color-surface-soft, color-mix(in srgb, var(--ul-card) 94%, var(--ul-text) 6%));
    --ul-border: var(--nx-component-border, var(--nx-color-card-border, var(--bs-border-color, #d9dee7)));
    --ul-text: var(--nx-color-on-card, var(--nx-color-on-surface, var(--bs-body-color, #172033)));
    --ul-muted: var(--nx-color-muted-on-card, var(--nx-color-muted, var(--bs-secondary-color, #667085)));
    --ul-accent: var(--nx-color-primary, var(--bs-primary, #ed7615));
    --ul-button: var(--nx-color-button-bg, var(--ul-accent));
    --ul-button-text: var(--nx-color-button-text, var(--nx-on-inverse-text, #fff));
    --ul-success: var(--bs-success, #198754);
    --ul-shadow: var(--nx-component-shadow, var(--nx-shadow-card, 0 8px 24px rgba(15,23,42,.06)));
    --ul-radius: var(--nx-component-radius, var(--nx-radius-lg, 14px));
    color: var(--ul-text);
}
.userlist-page-shell { box-sizing:border-box; width: 100%; max-width: none; margin: 0 auto; overflow: hidden; border: 1px solid var(--ul-border); border-radius: var(--ul-radius); background: var(--ul-card); box-shadow: var(--ul-shadow); }
.userlist-page-head { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1fr); gap: 2rem; align-items: center; min-height: 220px; padding: clamp(1.8rem,4vw,3.2rem); overflow: hidden; border-bottom: 1px solid var(--ul-border); background: linear-gradient(115deg,var(--ul-card) 42%,color-mix(in srgb,var(--ul-accent) 10%,var(--ul-card)) 100%); }
.userlist-page-head::before,.userlist-page-head::after { content:""; position:absolute; z-index:-1; right:-5rem; width:34rem; height:1px; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ul-accent) 45%,transparent)); transform:rotate(-15deg); box-shadow:0 4rem 0 color-mix(in srgb,var(--ul-accent) 18%,transparent),0 8rem 0 color-mix(in srgb,var(--ul-accent) 10%,transparent); }
.userlist-page-head::before { top:3.5rem; }
.userlist-page-head::after { top:9rem; right:-10rem; transform:rotate(12deg); }
.userlist-page-head__copy { position:relative; z-index:1; max-width:760px; }
.userlist-community-badge { display:inline-flex; align-items:center; gap:.45rem; margin-bottom:.7rem; padding:.4rem .8rem; border-radius:999px; background:var(--ul-button); color:var(--ul-button-text); box-shadow:var(--ul-shadow); font-size:.78rem; font-weight:700; }
.userlist-page-head h1 { margin:0; color:var(--ul-text); font-size:clamp(2.2rem,4vw,3.35rem); font-weight:800; letter-spacing:-.04em; line-height:1.04; }
.userlist-page-head__copy>p { max-width:720px; margin:.8rem 0 0; color:var(--ul-muted); font-size:1rem; line-height:1.6; }
.userlist-privacy-note { display:flex; align-items:center; gap:.45rem; margin-top:.7rem; color:var(--ul-muted); font-size:.78rem; line-height:1.45; }
.userlist-privacy-note i { color:var(--ul-accent); font-size:.86rem; }
.nx-member-directory { padding:clamp(1rem,2.4vw,1.7rem); }
.nx-member-filters { display:grid; grid-template-columns:minmax(240px,1.5fr) minmax(145px,.8fr) minmax(180px,.9fr) auto minmax(145px,.75fr); gap:.7rem; align-items:center; padding:.75rem; border:1px solid var(--ul-border); border-radius:var(--ul-radius); background:color-mix(in srgb,var(--ul-soft) 50%,var(--ul-card)); box-shadow:var(--ul-shadow); }
.nx-member-filters--without-teams { grid-template-columns:minmax(240px,1.5fr) minmax(145px,.8fr) auto minmax(145px,.75fr); }
.nx-member-filters label { position:relative; display:block; min-width:0; }
.nx-member-filters input,.nx-member-filters select { width:100%; min-height:44px; padding:.65rem 2.3rem .65rem .85rem; border:1px solid var(--ul-border); border-radius:calc(var(--ul-radius)*.72); background:var(--ul-card); color:var(--ul-text); outline:0; }
.nx-member-filters select { appearance:none; -webkit-appearance:none; background-image:none; }
.nx-member-filters input:focus,.nx-member-filters select:focus { border-color:color-mix(in srgb,var(--ul-accent) 60%,var(--ul-border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--ul-accent) 12%,transparent); }
.nx-member-search input { padding-left:2.5rem; }
.nx-member-filters label>i { position:absolute; top:50%; right:.85rem; color:var(--ul-muted); transform:translateY(-50%); pointer-events:none; }
.nx-member-search>i { right:auto!important; left:.9rem; }
.nx-member-status-tabs { display:flex; gap:0; margin:0; overflow:hidden; border:1px solid var(--ul-border); border-radius:calc(var(--ul-radius)*.72); }
.nx-member-status-tabs button { min-height:44px; padding:.55rem .85rem; border:0; border-right:1px solid var(--ul-border); background:var(--ul-card); color:var(--ul-muted); font-size:.78rem; font-weight:600; }
.nx-member-status-tabs button:last-child { border-right:0; }
.nx-member-status-tabs button.is-active { background:var(--ul-button); color:var(--ul-button-text); }
.nx-member-resultbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .25rem .5rem; }
.nx-member-resultbar strong { font-size:.86rem; }
.nx-member-view-toggle { display:inline-flex; overflow:hidden; border:1px solid var(--ul-border); border-radius:calc(var(--ul-radius)*.65); }
.nx-member-view-toggle button { width:44px; height:38px; border:0; border-left:1px solid var(--ul-border); background:var(--ul-card); color:var(--ul-text); }
.nx-member-view-toggle button:first-child { border-left:0; }
.nx-member-view-toggle button.is-active { color:var(--ul-accent); background:color-mix(in srgb,var(--ul-accent) 8%,var(--ul-card)); }
.nx-member-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; }
.nx-member-card { display:flex; min-width:0; min-height:190px; padding:1rem; flex-direction:column; border:1px solid var(--ul-border); border-radius:var(--ul-radius); background:var(--ul-card); box-shadow:var(--ul-shadow); }
.nx-member-card__body { display:flex; align-items:flex-start; gap:1rem; min-width:0; flex:1; }
.nx-member-avatar { position:relative; flex:0 0 auto; }
.nx-member-avatar img { display:block; width:82px; height:82px; border:1px solid var(--ul-border); border-radius:50%; object-fit:cover; background:var(--ul-soft); }
.nx-member-avatar>i { position:absolute; right:2px; bottom:3px; width:12px; height:12px; border:2px solid var(--ul-card); border-radius:50%; background:var(--ul-success); }
.nx-member-card__info { min-width:0; flex:1; }
.nx-member-card h2 { margin:.18rem 0 .3rem; overflow:hidden; color:var(--ul-text); font-size:1.08rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.nx-member-kicker { display:flex; min-height:22px; align-items:center; justify-content:space-between; gap:.5rem; color:var(--ul-accent); font-size:.68rem; font-weight:800; text-transform:uppercase; }
.nx-member-kicker>span { display:inline-flex; min-width:0; align-items:center; gap:.3rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nx-member-tagline { display:-webkit-box; min-height:2.7em; margin:.15rem 0 .55rem; overflow:hidden; color:var(--ul-muted); font-size:.76rem; line-height:1.35; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.nx-member-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .65rem; color:var(--ul-muted); font-size:.7rem; line-height:1.45; }
.nx-member-meta__item { display:inline-flex; align-items:center; min-width:0; }
.nx-member-meta__item>i { margin-right:.28rem; color:var(--ul-accent); }
.nx-member-meta__online { color:var(--ul-success); font-weight:700; }
.nx-member-meta__online i { width:7px; height:7px; margin-right:.3rem; border-radius:50%; background:currentColor; }
.nx-member-roles,.nx-member-teams,.nx-member-interests { display:flex; gap:.35rem; margin-top:.55rem; flex-wrap:wrap; }
.nx-member-roles { margin-top:.15rem; }
.nx-member-roles span,.nx-member-teams span,.nx-member-interests span { display:inline-flex; max-width:100%; align-items:center; gap:.3rem; overflow:hidden; padding:.25rem .5rem; border:1px solid var(--ul-border); border-radius:999px; background:var(--ul-soft); color:var(--ul-muted); font-size:.66rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.nx-member-roles span { border-color:color-mix(in srgb,var(--ul-accent) 28%,var(--ul-border));color:var(--ul-accent); }
.nx-member-teams span { color:var(--ul-text); }
.nx-member-teams i { color:var(--ul-accent); }
.nx-member-interests span { background:color-mix(in srgb,var(--ul-accent) 7%,var(--ul-card)); }
.nx-member-card__footer { display:flex; min-height:42px; align-items:flex-end; justify-content:space-between; gap:.65rem; margin-top:.75rem; padding-top:.65rem; border-top:1px solid var(--ul-border); }
.nx-member-stats { display:flex; gap:.75rem; color:var(--ul-muted); font-size:.68rem; }
.nx-member-stats strong { color:var(--ul-text); font-size:.82rem; }
.nx-member-profile { display:inline-flex; align-items:center; justify-content:center; gap:.35rem; margin-left:auto; padding:.48rem .7rem; border:1px solid var(--ul-border); border-radius:calc(var(--ul-radius)*.5); color:var(--ul-text); font-size:.72rem; font-weight:700; text-align:center; text-decoration:none; white-space:nowrap; }
.nx-member-profile:hover { border-color:var(--ul-accent); color:var(--ul-accent); }
.nx-member-directory--compact .nx-member-card { min-height:170px; padding:.8rem; }
.nx-member-directory--compact .nx-member-avatar img { width:66px; height:66px; }
.nx-member-directory--compact .nx-member-tagline { min-height:0; -webkit-line-clamp:1; }
.nx-member-grid.is-list { grid-template-columns:1fr; }
.nx-member-grid.is-list .nx-member-card { display:flex; min-height:0; align-items:center; gap:1rem; padding:.9rem 1rem; flex-direction:row; }
.nx-member-grid.is-list .nx-member-card__body { flex:1 1 auto; align-items:center; }
.nx-member-grid.is-list .nx-member-card__info { display:grid; flex:1 1 auto; grid-template-columns:minmax(180px,280px) minmax(220px,1fr); column-gap:1.25rem; align-items:start; }
.nx-member-grid.is-list .nx-member-avatar img { width:64px; height:64px; }
.nx-member-grid.is-list .nx-member-kicker,.nx-member-grid.is-list .nx-member-card h2,.nx-member-grid.is-list .nx-member-roles { grid-column:1; }
.nx-member-grid.is-list .nx-member-tagline,.nx-member-grid.is-list .nx-member-meta,.nx-member-grid.is-list .nx-member-teams,.nx-member-grid.is-list .nx-member-interests { grid-column:2; }
.nx-member-grid.is-list .nx-member-tagline { min-height:0; margin:.1rem 0 .35rem; -webkit-line-clamp:1; }
.nx-member-grid.is-list .nx-member-kicker { justify-content:flex-start; }
.nx-member-grid.is-list .nx-member-card__footer { min-width:255px; align-items:center; margin:0 0 0 auto; padding:0 0 0 1rem; border-top:0; border-left:1px solid var(--ul-border); }
.nx-member-grid.is-list .nx-member-profile { margin-left:auto; }
.nx-member-empty { grid-column:1/-1; display:grid; justify-items:center; gap:.65rem; padding:3rem; border:1px dashed var(--ul-border); border-radius:var(--ul-radius); color:var(--ul-muted); }
.nx-member-empty i { font-size:2rem; color:var(--ul-accent); }
.nx-member-pagination { display:flex; justify-content:center; gap:.35rem; margin:1.2rem 0; }
.nx-member-pagination a { min-width:38px; padding:.5rem .75rem; border:1px solid var(--ul-border); border-radius:7px; background:var(--ul-card); color:var(--ul-text); text-align:center; text-decoration:none; }
.nx-member-pagination a.is-active { border-color:var(--ul-accent); background:var(--ul-button); color:var(--ul-button-text); }
.nx-member-privacy { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; margin-top:1rem; padding:1rem 1.2rem; border:1px solid color-mix(in srgb,var(--ul-accent) 25%,var(--ul-border)); border-radius:var(--ul-radius); background:linear-gradient(90deg,color-mix(in srgb,var(--ul-accent) 7%,var(--ul-card)),var(--ul-card)); }
.nx-member-privacy>span { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; background:color-mix(in srgb,var(--ul-accent) 10%,var(--ul-card)); color:var(--ul-accent); font-size:1.3rem; }
.nx-member-privacy strong { color:var(--ul-text); }
.nx-member-privacy p { margin:.2rem 0 0; color:var(--ul-muted); font-size:.82rem; }
.nx-member-privacy a { padding:.65rem .9rem; border-radius:calc(var(--ul-radius)*.65); background:var(--ul-button); color:var(--ul-button-text); font-size:.78rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.userlist-avatar,.avatar_small,.team-member .member-img img { object-fit:cover; }
@media (max-width:1150px) { .userlist-page-head{grid-template-columns:1fr}.nx-member-filters{grid-template-columns:1fr 1fr}.nx-member-search{grid-column:1/-1}.nx-member-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:850px) { .nx-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nx-member-privacy{grid-template-columns:auto 1fr}.nx-member-privacy a{grid-column:1/-1;text-align:center} }
@media (max-width:700px) { .userlist-page-head{padding:1.5rem}.userlist-page-head h1{font-size:2rem}.nx-member-filters,.nx-member-grid{grid-template-columns:1fr}.nx-member-status-tabs{overflow-x:auto}.nx-member-status-tabs button{flex:1;text-align:center;white-space:nowrap}.nx-member-grid.is-list .nx-member-card{display:flex;align-items:stretch;flex-direction:column}.nx-member-grid.is-list .nx-member-card__info{display:block}.nx-member-grid.is-list .nx-member-card__footer{min-width:0;margin-top:.75rem;padding:.65rem 0 0;border-top:1px solid var(--ul-border);border-left:0}.nx-member-profile{margin-left:0}.nx-member-card__footer{align-items:stretch;flex-direction:column}.nx-member-stats{justify-content:space-between}.nx-member-profile{width:100%} }
