:root{
    --cv2-bg:#f7f7fb;
    --cv2-surface:rgba(255,255,255,.86);
    --cv2-soft:#eef0f5;
    --cv2-line:rgba(45,48,58,.09);

    --cv2-text:#1b1c20;
    --cv2-muted:#737780;

    --cv2-primary:#4054b2;
    --cv2-primary-container:#dfe3ff;

    --cv2-green:#daf5e1;
    --cv2-blue:#e1e8ff;
    --cv2-pink:#ffe2ef;
    --cv2-gold:#ffefca;
    --cv2-cyan:#e1f5f4;
    --cv2-violet:#ece2ff;

    --cv2-shadow:
        0 22px 70px
        rgba(25,29,44,.07);
}


/* =========================================================
   COMMUNITY FAMILY BAR
   ========================================================= */

.community-v2-bar{
    width:
        min(
            1320px,
            calc(100% - 32px)
        );

    margin:
        18px auto 0;

    min-height:62px;

    padding:8px;

    display:flex;
    align-items:center;

    gap:7px;

    border:
        1px solid
        var(--cv2-line);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(218,245,225,.80)
        );

    backdrop-filter:
        blur(22px);

    box-shadow:
        0 10px 35px
        rgba(25,29,44,.035);
}


.community-v2-identity{
    margin-right:auto;

    padding:
        0 10px;
}


.community-v2-identity strong{
    display:block;

    font-size:10px;
}


.community-v2-identity small{
    display:block;

    margin-top:2px;

    color:
        var(--cv2-muted);

    font-size:6px;

    font-weight:850;

    letter-spacing:.10em;
}


.community-v2-bar a{
    min-height:41px;

    padding:
        0 12px;

    display:flex;
    align-items:center;

    flex:0 0 auto;

    border-radius:18px;

    color:#61666e;

    text-decoration:none;

    font-size:7px;

    font-weight:850;
}


.community-v2-bar a.active{
    background:
        var(--cv2-primary-container);

    color:#17245e;
}


/* =========================================================
   COMMUNITY PAGE HERO
   ========================================================= */

body.insightos-v2-page
:is(
    .hero,
    .page-header,
    .heading,
    .title-area
){
    padding-top:
        38px !important;
}


body.insightos-v2-page h1{
    max-width:
        1050px;

    font-size:
        clamp(
            48px,
            6.5vw,
            92px
        ) !important;

    line-height:
        .9 !important;

    letter-spacing:
        -.07em !important;
}


/* =========================================================
   COMMUNITY CARD NORMALIZATION
   ========================================================= */

body.insightos-v2-page
:is(
    .community-card,
    .community,
    .group-card,
    .channel-card,
    .network-card,
    .source-card,
    .card,
    .panel
){
    border:
        1px solid
        var(--cv2-line) !important;

    border-radius:
        26px !important;

    background:
        var(--cv2-surface) !important;

    box-shadow:
        none !important;

    backdrop-filter:
        blur(18px);
}


body.insightos-v2-page
:is(
    .community-card,
    .community,
    .group-card
):nth-child(4n+1){
    background:
        linear-gradient(
            145deg,
            #fff,
            var(--cv2-green)
        ) !important;
}


body.insightos-v2-page
:is(
    .community-card,
    .community,
    .group-card
):nth-child(4n+2){
    background:
        linear-gradient(
            145deg,
            #fff,
            var(--cv2-blue)
        ) !important;
}


body.insightos-v2-page
:is(
    .community-card,
    .community,
    .group-card
):nth-child(4n+3){
    background:
        linear-gradient(
            145deg,
            #fff,
            var(--cv2-pink)
        ) !important;
}


body.insightos-v2-page
:is(
    .community-card,
    .community,
    .group-card
):nth-child(4n+4){
    background:
        linear-gradient(
            145deg,
            #fff,
            var(--cv2-gold)
        ) !important;
}


/* =========================================================
   SEARCH
   ========================================================= */

body.insightos-v2-page
:is(
    .search,
    .search-box,
    .filter-bar,
    .filters,
    form[role="search"]
){
    border-radius:
        25px !important;

    border:
        1px solid
        var(--cv2-line) !important;

    background:
        rgba(255,255,255,.80) !important;
}


/* =========================================================
   METRICS
   ========================================================= */

body.insightos-v2-page
:is(
    .stats,
    .metrics,
    .stats-grid,
    .metric-grid
){
    gap:
        8px !important;
}


body.insightos-v2-page
:is(
    .stat,
    .metric,
    .kpi,
    .summary-card
){
    min-height:
        110px;

    border-radius:
        22px !important;
}


/* =========================================================
   COMMUNITY TOOLBOX
   ========================================================= */

.community-v2-tools{
    width:
        min(
            1320px,
            calc(100% - 32px)
        );

    margin:
        10px auto 0;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:7px;
}


.community-v2-tool{
    min-height:92px;

    padding:13px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border:
        1px solid
        var(--cv2-line);

    border-radius:21px;

    text-decoration:none;

    color:
        var(--cv2-text);
}


.community-v2-tool:nth-child(1){
    background:
        var(--cv2-green);
}


.community-v2-tool:nth-child(2){
    background:
        var(--cv2-blue);
}


.community-v2-tool:nth-child(3){
    background:
        var(--cv2-pink);
}


.community-v2-tool:nth-child(4){
    background:
        var(--cv2-gold);
}


.community-v2-tool span{
    font-size:17px;
}


.community-v2-tool strong{
    font-size:8px;
}


/* =========================================================
   DASHBOARD CARD
   ========================================================= */

.v2-community-dashboard-card{
    min-height:165px !important;

    padding:16px !important;

    position:relative;

    overflow:hidden;

    border:
        1px solid
        var(--cv2-line) !important;

    border-radius:
        25px !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            var(--cv2-green)
        ) !important;

    text-decoration:none !important;

    color:
        var(--cv2-text) !important;
}


.v2-community-dashboard-card::after{
    content:"";

    position:absolute;

    width:120px;
    height:120px;

    right:-45px;
    top:-45px;

    border-radius:50%;

    background:
        rgba(255,255,255,.34);
}


.v2-community-dashboard-card
.v2-community-icon{
    width:43px;
    height:43px;

    display:grid;

    place-items:center;

    border-radius:15px;

    background:#202124;

    color:#fff;

    font-size:16px;
}


.v2-community-dashboard-card strong{
    display:block;

    margin-top:24px;

    font-size:17px;

    letter-spacing:-.035em;
}


.v2-community-dashboard-card small{
    display:block;

    margin-top:6px;

    max-width:250px;

    color:#626970;

    font-size:7px;

    line-height:1.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:800px){

    .community-v2-tools{
        grid-template-columns:
            1fr
            1fr;
    }
}


@media(max-width:760px){

    .community-v2-bar{
        width:
            calc(100% - 18px);

        margin-top:
            9px;

        overflow-x:auto;
    }


    .community-v2-identity{
        display:none;
    }


    .community-v2-bar a{
        flex:0 0 auto;
    }


    .community-v2-tools{
        width:
            calc(100% - 18px);
    }
}


@media(max-width:480px){

    .community-v2-tools{
        grid-template-columns:
            1fr;
    }
}