:root{
    --bg0:#070815;
    --bg1:#0b1020;
    --card: rgba(255,255,255,0.07);
    --stroke: rgba(255,255,255,0.14);
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.70);
    --shadow: 0 18px 50px rgba(0,0,0,0.35);

    --a1: rgba(110, 231, 255, 0.35);
    --a2: rgba(167, 139, 250, 0.32);
    --a3: rgba(34, 211, 238, 0.18);

    --b1: rgba(251, 191, 36, 0.30);
    --b2: rgba(34, 197, 94, 0.26);
    --b3: rgba(249, 115, 22, 0.16);
}

body{
    margin:0;
    color:var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    background:
    radial-gradient(1200px 700px at 18% 12%, rgba(110,231,255,0.22), rgba(0,0,0,0) 56%),
    radial-gradient(900px 600px at 82% 28%, rgba(167,139,250,0.18), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
    overflow-x:hidden;
}

.wrap{
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 18px 80px;
}

header{
    display:flex;
    gap: 18px;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
}

.headline{
    max-width: 720px;
}

.kicker{
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.2px;
}

h1{
    margin: 8px 0 8px;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.6px;
}

.sub{
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
    font-size: 15px;
}

.stats{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
}

.stat{
    min-width: 150px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
}

.statLabel{
    font-size: 12px;
    color: var(--muted);
}

.statValue{
    font-size: 26px;
    font-weight: 850;
    margin-top: 4px;
}

.toolbar{
    margin-top: 18px;
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    align-items:center;
}

.search{
    flex: 1 1 280px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--stroke);
    color: var(--text);
    outline: none;
}

.tabs{
    display:flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--stroke);
}

.tab{
    cursor:pointer;
    user-select:none;
    padding: 10px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 720;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0);
    border: 0;
}

.tab[data-active="1"]{
    background: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.96);
}

.tagSelect{
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--stroke);
    color: var(--text);
    outline: none;
}

.grid{
    margin-top: 18px;
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 16px;
}

.card{
    border-radius: 22px;
    background: var(--card);
    border: 1px solid var(--stroke);
    box-shadow: var(--shadow);
    overflow:hidden;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    will-change: transform;
}

.themeA{
    outline: 1px solid rgba(34,211,238,0.12);
}

.themeB{
    outline: 1px solid rgba(251,191,36,0.12);
}

.cardTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
    padding: 14px 14px 10px;
}

.badgeRow{
    display:flex;
    gap: 8px;
    align-items:center;
    flex-wrap:wrap;
}

.groupBadge{
    font-size: 12px;
    font-weight: 780;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.08);
}

.themeA .groupBadge{
    background:
    radial-gradient(70% 120% at 20% 10%, var(--a1), rgba(0,0,0,0)),
    radial-gradient(70% 120% at 80% 80%, var(--a2), rgba(0,0,0,0)),
    rgba(255,255,255,0.08);
}

.themeB .groupBadge{
    background:
    radial-gradient(70% 120% at 20% 10%, var(--b1), rgba(0,0,0,0)),
    radial-gradient(70% 120% at 80% 80%, var(--b2), rgba(0,0,0,0)),
    rgba(255,255,255,0.08);
}

.dateBadge{
    font-size: 12px;
    color: var(--muted);
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.12);
}

.openBtn{
    cursor:pointer;
    font-size: 12px;
    font-weight: 800;
    padding: 9px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.92);
}

.openBtn:hover{
    background: rgba(255,255,255,0.14);
}

.cardMedia{
    position:relative;
    height: 150px;
    overflow:hidden;
}

.hero{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    filter: saturate(1.15) contrast(1.02);
    transform: scale(1.02);
}

.heroPlaceholder{
    width:100%;
    height:100%;
}

.heroPlaceholder.themeA{
    background:
    radial-gradient(700px 240px at 20% 20%, var(--a1), rgba(0,0,0,0)),
    radial-gradient(700px 240px at 80% 70%, var(--a2), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(34,211,238,0.10), rgba(167,139,250,0.10));
}

.heroPlaceholder.themeB{
    background:
    radial-gradient(700px 240px at 20% 20%, var(--b1), rgba(0,0,0,0)),
    radial-gradient(700px 240px at 80% 70%, var(--b2), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(251,191,36,0.10), rgba(34,197,94,0.10));
}

.cardBody{
    padding: 12px 14px 16px;
}

.team{
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.title{
    margin-top: 6px;
    font-size: 14px;
    font-weight: 740;
    color: rgba(255,255,255,0.90);
    line-height: 1.25;
}

.glance{
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
    min-height: 58px;
}

.pillRow{
    margin-top: 10px;
    display:flex;
    gap: 8px;
    flex-wrap:wrap;
}

.pill{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.14);
    color: rgba(255,255,255,0.86);
}

.avatarRow{
    margin-top: 12px;
    display:flex;
    align-items:center;
    gap: 8px;
    flex-wrap:wrap;
}

.avatar{
    width: 32px;
    height: 32px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(0,0,0,0.16);
}

.avatarFallback{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,0.90);
    background:
    radial-gradient(60% 80% at 30% 20%, rgba(255,255,255,0.18), rgba(0,0,0,0)),
    rgba(0,0,0,0.18);
}

.linkBtn{
    display:inline-block;
    margin-top: 12px;
    text-decoration:none;
    font-size: 13px;
    font-weight: 850;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.94);
}

.linkBtn:hover{
    background: rgba(255,255,255,0.14);
}

.footerNote{
    margin-top: 14px;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
}

.backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.62);
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding: 26px 18px;
    z-index: 50;
}

body.modalOpen .backdrop{
    display:flex;
}

.modalShell{
    width: min(980px, 100%);
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.14);
    background:
    radial-gradient(900px 500px at 20% 10%, rgba(255,255,255,0.08), rgba(0,0,0,0) 60%),
    rgba(12,14,26,0.92);
    box-shadow: 0 30px 90px rgba(0,0,0,0.55);
    overflow:hidden;
}

.modalHeader{
    display:flex;
    justify-content:space-between;
    gap: 12px;
    padding: 16px 16px 10px;
    align-items:flex-start;
}

.modalBadges{
    display:flex;
    gap: 8px;
    flex-wrap:wrap;
    align-items:center;
}

.close{
    cursor:pointer;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.94);
    font-weight: 900;
}

.modalGrid{
    display:grid;
    grid-template-columns: 1.2fr 0.8fr;
}

@media (max-width: 900px){
    .modalGrid{
    grid-template-columns: 1fr;
    }
}

.modalHero{
    height: 360px;
    background: rgba(0,0,0,0.18);
    overflow:hidden;
}

.modalHero img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    filter: saturate(1.15) contrast(1.02);
}

.modalHeroPlaceholder{
    width:100%;
    height:100%;
}

.modalHeroPlaceholder.themeA{
    background:
    radial-gradient(900px 360px at 15% 15%, var(--a1), rgba(0,0,0,0)),
    radial-gradient(900px 360px at 85% 85%, var(--a2), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(34,211,238,0.12), rgba(167,139,250,0.12));
}

.modalHeroPlaceholder.themeB{
    background:
    radial-gradient(900px 360px at 15% 15%, var(--b1), rgba(0,0,0,0)),
    radial-gradient(900px 360px at 85% 85%, var(--b2), rgba(0,0,0,0)),
    linear-gradient(135deg, rgba(251,191,36,0.12), rgba(34,197,94,0.12));
}

.modalBody{
    padding: 14px 16px 18px;
    border-top: 1px solid rgba(255,255,255,0.10);
}

.mTeam{
    font-size: 22px;
    font-weight: 950;
    letter-spacing: -0.3px;
    margin-top: 2px;
}

.mTitle{
    margin-top: 8px;
    font-size: 14px;
    font-weight: 750;
    color: rgba(255,255,255,0.90);
    line-height: 1.3;
}

.mGlance{
    margin-top: 10px;
    color: rgba(255,255,255,0.74);
    line-height: 1.5;
    font-size: 14px;
}

.side{
    padding: 14px 16px 18px;
    border-left: 1px solid rgba(255,255,255,0.10);
}

@media (max-width: 900px){
    .side{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    }
}

.sideTitle{
    color: rgba(255,255,255,0.72);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.members{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mMember{
    display:flex;
    gap: 10px;
    align-items:center;
    padding: 10px 10px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.mAvatar{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.20);
    background: rgba(0,0,0,0.16);
    flex: 0 0 auto;
}

.mAvatarFallback{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight: 950;
    color: rgba(255,255,255,0.92);
    background:
    radial-gradient(60% 80% at 30% 20%, rgba(255,255,255,0.18), rgba(0,0,0,0)),
    rgba(0,0,0,0.18);
}

.mName{
    font-size: 13px;
    color: rgba(255,255,255,0.86);
    font-weight: 800;
    line-height: 1.15;
}

.modalActions{
    margin-top: 12px;
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
}

.primary{
    text-decoration:none;
    display:inline-block;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.96);
    font-weight: 900;
    font-size: 13px;
}

.primary:hover{
    background: rgba(255,255,255,0.18);
}