.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-surface, var(--bs-body-color, #172033));
    --ul-muted: 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 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:150px; padding:.85rem; 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:.85rem; min-width:0; flex:1; }
.nx-member-avatar { position:relative; flex:0 0 auto; }
.nx-member-avatar img { display:block; width:78px; height:78px; 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:.1rem 0 .25rem; overflow:hidden; color:var(--ul-text); font-size:1.05rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.nx-member-meta { display:flex; flex-wrap:wrap; align-items:center; column-gap:.42rem; row-gap:.18rem; color:var(--ul-muted); font-size:.72rem; line-height:1.45; }
.nx-member-meta__item { display:inline-flex; align-items:center; min-width:0; }
.nx-member-meta__item + .nx-member-meta__item::before { content:"·"; margin-right:.42rem; color:var(--ul-muted); }
.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-profile { display:block; margin-top:.65rem; padding:.42rem .65rem; border:1px solid var(--ul-border); border-radius:calc(var(--ul-radius)*.5); color:var(--ul-text); font-size:.75rem; font-weight:700; text-align:center; text-decoration:none; }
.nx-member-profile:hover { border-color:var(--ul-accent); color:var(--ul-accent); }
.nx-member-grid.is-list { grid-template-columns:1fr; }
.nx-member-grid.is-list .nx-member-card { min-height:0; flex-direction:row; align-items:center; gap:1rem; }
.nx-member-grid.is-list .nx-member-card__body { align-items:center; }
.nx-member-grid.is-list .nx-member-avatar img { width:58px; height:58px; }
.nx-member-grid.is-list .nx-member-profile { width:170px; margin:0 0 0 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:600px) { .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{align-items:stretch;flex-direction:column}.nx-member-grid.is-list .nx-member-profile{width:auto;margin:.65rem 0 0} }