.members-grid{
        display:grid; 
        gap:18px;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }

    .member-card{
        border-radius:8px; 
        overflow:hidden;
        background:rgba(255,255,255,.04);
        border:2px solid rgba(255,255,255,.28);
        box-shadow:0 10px 30px rgba(0,0,0,.35);
        transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .member-card:hover{
        border-color:rgba(13, 224, 136, 0.57);
        box-shadow:0 0px 26px rgba(33, 187, 45, 0.57);
    }
    .member-card:hover .member-name-row {
        color: rgb(235, 235, 235);
    }

    .member-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
    .member-media .member_portrait{
        width:100%; 
        height:100%;
        object-fit:cover;
        object-position: 50% var(--portrait-y);
        transform: scale(var(--scale, 1));
        transition:transform .2s ease;
    }

    .member-media{ --portrait-y: 0%; --scale: 1.18; }
    .member-media[data-race="Lalafell"]  { --portrait-y: 0%;--scale: 1.4; }
    .member-media[data-race="Hyur"]      { --portrait-y: -50%;--scale: 2; }
    .member-media[data-race="Miqote"]    { --portrait-y: -50%;--scale: 2; }
    .member-media[data-race="Au Ra"]     { --portrait-y: -50%;--scale: 2; }
    .member-media[data-race="Viera"]     { --portrait-y: -50%;--scale: 2; }
    .member-media[data-race="Elezen"]    { --portrait-y: -53%;--scale: 2.2; }
    .member-media[data-race="Roegadyn"]  { --portrait-y: -53%;--scale: 2.2; }
    .member-media[data-race="Hrothgar"]  { --portrait-y: -54%;--scale: 2; }

    .member-media:after{
        content:""; 
        position:absolute; 
        inset:0;
        background:linear-gradient(to top, rgba(0,0,0,.80), rgba(0,0,0,0) 55%);
    }

    .member-overlay{
        position:absolute; 
        left:6px; 
        right:6px; 
        bottom:6px; 
        z-index:2;
        display:flex; 
        align-items:flex-end; 
        justify-content:flex-end;
    }
    .member-name{
        font-weight:800; 
        letter-spacing:.2px; 
        line-height:1.1;
        text-shadow:0 2px 14px rgba(0,0,0,.8);
    }
    .rank-badge{
        display:flex; 
        align-items:center; 
        gap:3px;
        padding:3px 10px; 
        border-radius:999px;
        background:rgba(0,0,0,.35); 
        border:1px solid rgba(255,255,255,.14);
        font-size:12px; 
        white-space:nowrap;
    }
    .rank-badge img{ width:16px; height:16px; }

    .member-name-row{
        padding:10px 12px 8px;
        font-weight:900;
        font-size:16px;
        white-space:nowrap; 
        overflow:hidden; 
        text-overflow:ellipsis;
        border-top:1px solid rgba(255,255,255,.06);
    }
    .member-meta{
        padding:0 12px 14px;
        display:flex; 
        align-items:center; 
        justify-content:flex-start; 
        gap:10px;
    }
    .job-pill{
        display:flex; 
        align-items:center; 
        gap:8px;
        padding:8px 10px; 
        border-radius:6px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.04);
        min-width:0;
    }
    .job-pill .job-name{ font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .job-pill img{ width:20px; height:20px; }

    .level-chip{
        position:absolute; 
        top:6px; 
        right:6px; 
        z-index:3;
        padding:3px 6px; 
        border-radius:8px;
        background:rgba(0,0,0,.55);
        border:1px solid rgba(255,255,255,.14);
        font-weight:900; 
        min-width:44px; 
        text-align:center;
    }

    .level-chip img{
        width:16px;
        height:16px;
        margin-left:6px;
        vertical-align:-4px;
    }

    .tank-bg .level-chip{ border:1px solid rgba(255,255,255,.28);background: linear-gradient(90deg,rgba(26, 40, 105, 0.4) 0%, rgba(102, 139, 242, 0.4) 100%); }
    .healer-bg .level-chip{ border:1px solid rgba(255,255,255,.28);background: linear-gradient(90deg,rgba(28, 117, 62, 0.4) 0%, rgba(102, 242, 160, 0.4) 100%);}
    .dps-bg .level-chip{ border:1px solid rgba(255,255,255,.28);background: linear-gradient(90deg,rgba(117, 28, 28, 0.4) 0%, rgba(242, 102, 102, 0.4) 100%); }
    .craft-bg .level-chip{ border:1px solid rgba(255,255,255,.28);background: linear-gradient(90deg,rgba(117, 108, 28, 0.4) 0%, rgba(242, 233, 102, 0.4) 100%); }
    .gather-bg .level-chip{ border:1px solid rgba(255,255,255,.28);background: linear-gradient(90deg,rgba(107, 106, 107, 0.4) 0%, rgba(221, 221, 221, 0.4) 100%); }

    .member-card a{ color:inherit; text-decoration:none; }