/* =========================
   NETWORK PAGE
========================= */

.network-page {

    width:
        min(
            var(--content-extra-wide),
            calc(100% - var(--page-gutter))
        );

    margin:0 auto;

    padding-bottom:80px;

}


.network-heading {

    padding:92px 20px 35px;

    text-align:center;

}


.network-heading h1 {

    margin:12px 0 14px;

    font-size:clamp(38px, 6vw, 62px);

    line-height:1.05;

    letter-spacing:-1.8px;

}


.network-heading p {

    max-width:700px;

    margin:0 auto;

    color:#667085;

    font-size:18px;

    line-height:1.7;

}


/* =========================
   NETWORK LAYOUT
========================= */

.network-layout {

    min-height:720px;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        330px;

    gap:24px;

}


.network-panel,
.network-details {

    background:rgba(255,255,255,.9);

    border:
        1px solid rgba(216,223,237,.88);

    border-radius:28px;

    box-shadow:
        0 18px 42px rgba(40,57,87,.09);

}


.network-panel {

    min-width:0;

    overflow:hidden;

}


/* =========================
   NETWORK TOOLBAR
========================= */

.network-toolbar {

    min-height:78px;

    padding:16px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    border-bottom:
        1px solid rgba(216,223,237,.8);

}


.network-search-field {

    flex:1;

}


.network-search-field input {

    width:min(360px, 100%);

    height:46px;

    padding:0 18px;

    background:#f8f9fc;

    border:1px solid #d9dde7;

    border-radius:18px;

    font-family:inherit;

    font-size:15px;

    transition:
        border-color .2s,
        box-shadow .2s;

}


.network-search-field input:focus {

    outline:none;

    border-color:#4da6ff;

    box-shadow:
        0 0 0 4px rgba(77,166,255,.13);

}


.network-search-field input.network-search-error {

    border-color:#e25b68;

    box-shadow:
        0 0 0 4px rgba(226,91,104,.12);

}


.network-control-button {

    height:46px;

    padding:0 20px;

    background:#fff;

    border:1px solid #d9dde7;

    border-radius:18px;

    color:#444;

    font-family:inherit;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:
        border-color .2s,
        color .2s,
        transform .2s;

}


.network-control-button:hover {

    border-color:#9bbbf0;

    color:#276dd1;

    transform:translateY(-2px);

}

/*
==========================================================
NETWORK VIEW SWITCH
==========================================================
*/

.network-view-switch {

    display: flex;

    gap: 6px;

    padding: 4px;

    border:
        1px solid
        rgba(112,125,155,.22);

    border-radius: 999px;

    background:
        rgba(255,255,255,.72);

}


.network-view-button {

    padding: 10px 18px;

    border: 0;

    border-radius: 999px;

    background: transparent;

    cursor: pointer;

    font: inherit;

}


.network-view-button.is-active {

    background: #7666e8;

    color: white;

    box-shadow:
        0 5px 14px
        rgba(118,102,232,.24);

}

/* =========================
   NETWORK CANVAS
========================= */

.network-canvas-wrapper {

    height:640px;

    position:relative;

}


#networkGraph {

    width:100%;

    height:100%;

    outline:none;

}


.network-loading {

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#667085;

    background:
        rgba(255,255,255,.82);

    font-size:17px;

    pointer-events:none;

}


.network-loading[hidden] {

    display:none;

}


/* =========================
   NETWORK DETAILS
========================= */

.network-details {

    padding:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    text-align:center;

}


.network-details-placeholder {

    color:#667085;

}


.network-details-placeholder h2 {

    margin:0 0 10px;

    color:#222;

}


.network-details-placeholder p {

    margin:0;

    line-height:1.6;

}


.network-talent-details {

    width:100%;

}


.network-details-portrait {

    width:145px;

    height:145px;

    object-fit:cover;

    border-radius:32px;

    box-shadow:
        0 12px 28px rgba(40,57,87,.15);

}


.network-talent-details h2 {

    margin:20px 0 6px;

    font-size:28px;

}


.network-details-meta {

    margin:0 0 15px;

    color:#667085;

    line-height:1.5;

}


.network-details-divider {

    width:75%;

    height:2px;

    margin:26px auto;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #4da6ff,
            #9b7cff
        );

}


.network-detail-stat {

    margin:22px 0;

}


.network-detail-stat span,
.network-closest-partner > span {

    display:block;

    color:#667085;

    font-size:14px;

}


.network-detail-stat strong {

    display:block;

    margin-top:4px;

    font-size:34px;

}


.network-closest-partner {

    margin:25px 0;

}


.network-closest-partner strong {

    display:block;

    margin-top:7px;

    font-size:18px;

}


.network-closest-partner small {

    display:block;

    margin-top:5px;

    color:#8a93a4;

}

/*
==========================================================
CLOSEST PARTNER CARD
==========================================================
*/

.network-closest-partner-card {

    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 10px;
    padding: 10px 12px;

    color: #222;
    text-decoration: none;

    background: #f7f8fd;

    border:
        1px solid #e5e9f1;

    border-radius: 16px;

    transition:
        transform .2s,
        background .2s,
        box-shadow .2s;

}


.network-closest-partner-card:hover {

    color: #222;

    transform:
        translateY(-2px);

    background: #f0f5ff;

    box-shadow:
        0 10px 22px
        rgba(40,57,87,.08);

}


.network-closest-partner-card img {

    width: 46px;
    height: 46px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 50%;

}


.network-closest-partner-card > div {

    display: flex;
    flex: 1;
    min-width: 0;

    flex-direction: column;
    justify-content: center;

    text-align: left;

}


.network-closest-partner-card strong {

    display: block;

    margin: 0;

    overflow: hidden;

    font-size: 16px;
    line-height: 1.2;

    text-overflow: ellipsis;
    white-space: nowrap;

}


.network-closest-partner-card small {

    display: block;

    margin-top: 4px;

    color: #8a93a4;

    font-size: 13px;
    line-height: 1.2;

}


.network-profile-button {

    margin-top:12px;

    border:0;

    font-family:inherit;

    font-size:15px;

    cursor:pointer;

}


/* =========================
   NETWORK ERROR
========================= */

.network-error {

    margin-top:25px;

    padding:30px;

    text-align:center;

    background:#fff1f2;

    border:1px solid #f2c6cb;

    border-radius:22px;

}


.network-error h2 {

    margin:0 0 8px;

}


.network-error p {

    margin:0;

    color:#80545a;

}

/*
==========================================================
COMMUNITY DETAILS
==========================================================
*/

.network-community-details {

    --community-accent:
        #7666e8;

    width: 100%;

    display: flex;

    flex-direction: column;
    align-items: stretch;

    text-align: center;

}


.network-community-logo {

    width:
        min(150px, 72%);

    max-height:
        68px;

    display:
        block;

    margin:
        0 auto 12px;

    object-fit:
        contain;

}


.network-community-details h2 {

    margin:
        0;

    color:
        #252733;

    font-size:
        1.45rem;

    font-weight:
        750;

}


.network-community-details
.network-details-divider {

    width:
        100%;

    height:
        1px;

    margin:
        14px 0;

    background:
        color-mix(
            in srgb,
            var(--community-accent) 42%,
            transparent
        );

}

/*
==========================================================
COMMUNITY FOCUS BUTTON
==========================================================
*/

.network-community-focus-button {

    align-self:
        center;

    width:
        auto;

    min-width:
        145px;

    margin-top:
        10px;

    padding:
        8px 18px;

    border-radius:
        13px;

    font-size:
        .78rem;

}

/*
==========================================================
COMMUNITY STATISTICS
==========================================================
*/

.network-community-stats {

    width:
        100%;

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        7px;

}


.network-community-stat {

    min-width:
        0;

    padding:
        11px 3px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--community-accent) 24%,
            transparent
        );

    border-radius:
        13px;

    background:
        #f7f8fd;

}


.network-community-stat strong {

    display:
        block;

    color:
        #252733;

    font-size:
        1.25rem;

    line-height:
        1;

}


.network-community-stat span {

    width:
        100%;

    display:
        block;

    margin-top:
        6px;

    overflow:
        hidden;

    color:
        #8a91a5;

    font-size:
        .58rem;

    font-weight:
        700;

    letter-spacing:
        .04em;

    text-overflow:
        ellipsis;

    text-transform:
        uppercase;

    white-space:
        nowrap;

}

/*
==========================================================
COMMUNITY LEADER
==========================================================
*/

.network-community-leader {

    width:
        100%;

    text-align:
        left;

}


.network-community-leader > span {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--community-accent);

    font-size:
        .68rem;

    font-weight:
        750;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.network-community-leader-card {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        10px;

    border-radius:
        16px;

    background:
        #f7f8fd;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;

}


.network-community-leader-card:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 22px
        rgba(40,57,87,.11);

}


.network-community-leader-card img {

    width:
        48px;

    height:
        48px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    object-fit:
        cover;

}


.network-community-leader-card div {

    min-width:
        0;

    display:
        grid;

    gap:
        3px;

    text-align:
        left;

}


.network-community-leader-card strong {

    overflow:
        hidden;

    font-size:
        .88rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.network-community-leader-card small {

    color:
        #8a91a5;

    font-size:
        .73rem;

}

/*
==========================================================
COMMUNITY LATEST COLLABORATION
==========================================================
*/

.network-latest-collaboration {

    width:
        100%;

    text-align:
        left;

}


.network-latest-collaboration
> .profile-section-eyebrow {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--community-accent);

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.network-latest-card {

    display:
        block;

    overflow:
        hidden;

    border-radius:
        17px;

    background:
        #f7f8fd;

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform 160ms ease,
        box-shadow 160ms ease;

}


.network-latest-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 25px
        rgba(40,57,87,.13);

}


.network-latest-card > img {

    width:
        100%;

    display:
        block;

    aspect-ratio:
        16 / 8.5;

    object-fit:
        cover;

}


.network-latest-card-body {

    display:
        grid;

    gap:
        5px;

    padding:
        11px 12px 12px;

}


.network-latest-card-body strong {

    display:
        -webkit-box;

    overflow:
        hidden;

    font-size:
        .83rem;

    line-height:
        1.35;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

}


.network-latest-card-body span,
.network-latest-card-body time {

    overflow:
        hidden;

    color:
        #8a91a5;

    font-size:
        .7rem;

    line-height:
        1.35;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}

/*
==========================================================
COMMUNITY EMPTY STATE
==========================================================
*/

.network-community-empty {

    margin:
        0;

    padding:
        20px 12px;

    border-radius:
        16px;

    background:
        #f7f8fd;

    color:
        #8a91a5;

    text-align:
        center;

}

/* =========================
   NETWORK RESPONSIVE
========================= */

@media(max-width:1000px) {

    .network-layout {

        grid-template-columns:1fr;

    }


    .network-details {

        min-height:360px;

    }

}


@media(max-width:650px) {

    .network-page {

        width:calc(100% - 20px);

    }


    .network-heading h1 {

        font-size:40px;

    }


    .network-toolbar {

        align-items:stretch;

        flex-direction:column;

    }

    .network-view-switch {

    width:
        100%;

    }


    .network-view-button {

        flex:
            1;

        text-align:
            center;

    }


    .network-search-field input,
    .network-control-button {

        width:100%;

    }


    .network-canvas-wrapper {

        height:520px;

    }

    #networkGraph,
    #networkGraph canvas {

        touch-action:
            pan-y pinch-zoom !important;

    }

}

/* ==========================================================
   LARGE DESKTOP NETWORK EXPANSION
   ==========================================================

   Network is a visualization page, so on very large desktop
   screens it is allowed to use more space than standard pages.

   The extra selector specificity here is intentional:
   css/layout/large-screen.css is imported after page CSS,
   so these Network-specific rules must remain authoritative
   without using !important.
*/

@media (min-width: 1800px) {

    .network-page {

        width:
            min(
                2200px,
                calc(100% - 96px)
            );

        padding-bottom:
            96px;

    }


    .network-page .network-heading {

        padding:
            92px 20px 42px;

    }


    .network-page .network-heading h1 {

        font-size:
            66px;

    }


    .network-page .network-heading p {

        max-width:
            820px;

        font-size:
            19px;

    }


    .network-page .network-layout {

        min-height:
            900px;

        grid-template-columns:
            minmax(0, 1fr)
            370px;

        gap:
            30px;

    }


    .network-page .network-canvas-wrapper {

        height:
            820px;

    }


    .network-page .network-toolbar {

        min-height:
            82px;

        padding:
            17px 22px;

    }


    .network-page .network-search-field input {

        width:
            min(
                420px,
                100%
            );

    }


    .network-page .network-details {

        padding:
            30px;

    }

}


@media (min-width: 2400px) {

    .network-page {

        width:
            min(
                2500px,
                calc(100% - 128px)
            );

    }


    .network-page .network-layout {

        min-height:
            1020px;

        grid-template-columns:
            minmax(0, 1fr)
            390px;

        gap:
            34px;

    }


    .network-page .network-canvas-wrapper {

        height:
            940px;

    }

}


/*
==========================================================
DARK THEME
==========================================================
*/

html[data-theme="dark"] .network-heading p,
html[data-theme="dark"] .network-loading,
html[data-theme="dark"] .network-details-placeholder,
html[data-theme="dark"] .network-details-meta,
html[data-theme="dark"] .network-detail-stat span,
html[data-theme="dark"] .network-closest-partner > span,
html[data-theme="dark"] .network-closest-partner small,
html[data-theme="dark"] .network-closest-partner-card small,
html[data-theme="dark"] .network-community-stat span,
html[data-theme="dark"] .network-community-leader-card small,
html[data-theme="dark"] .network-latest-card-body span,
html[data-theme="dark"] .network-latest-card-body time,
html[data-theme="dark"] .network-community-empty {
    color: var(--text-muted);
}

html[data-theme="dark"] .network-panel,
html[data-theme="dark"] .network-details {
    background: var(--surface-primary);
    border-color: var(--border-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.07);
}

html[data-theme="dark"] .network-toolbar {
    border-bottom-color: var(--border-primary);
}

html[data-theme="dark"] .network-search-field input {
    color: var(--text-primary);
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .network-search-field input::placeholder {
    color: var(--text-muted);
}

html[data-theme="dark"] .network-control-button {
    color: var(--text-secondary);
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .network-control-button:hover {
    color: #7eb8ff;
    border-color: rgba(77,166,255,.55);
}

html[data-theme="dark"] .network-view-switch {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .network-view-button {
    color: var(--text-secondary);
}

html[data-theme="dark"] .network-view-button.is-active {
    color: #fff;
}

html[data-theme="dark"] .network-loading {
    background: color-mix(in srgb, var(--surface-primary) 88%, transparent);
}

html[data-theme="dark"] .network-details-placeholder h2,
html[data-theme="dark"] .network-community-details h2,
html[data-theme="dark"] .network-community-stat strong {
    color: var(--text-primary);
}

html[data-theme="dark"] .network-details-portrait {
    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}

html[data-theme="dark"] .network-closest-partner-card,
html[data-theme="dark"] .network-community-stat,
html[data-theme="dark"] .network-community-leader-card,
html[data-theme="dark"] .network-latest-card,
html[data-theme="dark"] .network-community-empty {
    color: var(--text-primary);
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .network-closest-partner-card:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
    box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

html[data-theme="dark"] .network-community-leader-card:hover,
html[data-theme="dark"] .network-latest-card:hover {
    box-shadow: 0 12px 25px rgba(0,0,0,.22);
}

html[data-theme="dark"] .network-error {
    background: rgba(226,91,104,.10);
    border-color: rgba(226,91,104,.30);
}

html[data-theme="dark"] .network-error p {
    color: #e3a7ae;
}


/*
==========================================================
NETWORK NAVIGATION BUTTONS
==========================================================
*/

/*
Replace vis-network's built-in green bitmap controls completely.
The icons below are drawn with CSS so their color follows the
HoloCollabDex palette cleanly in both themes.
*/

#networkGraph .vis-navigation .vis-button {

    width:
        32px;

    height:
        32px;

    position:
        absolute;

    border:
        1px solid
        var(--border-primary);

    border-radius:
        50%;

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

    background-image:
        none !important;

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            .12
        );

    transition:
        transform .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;

}


#networkGraph .vis-navigation .vis-button:hover {

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

    border-color:
        #7666e8;

    box-shadow:
        0 6px 16px
        rgba(
            0,
            0,
            0,
            .18
        );

    transform:
        scale(1.06);

}


/* Shared icon color */

#networkGraph .vis-navigation .vis-button::before,
#networkGraph .vis-navigation .vis-button::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    pointer-events:
        none;

}


/* Zoom + / - */

#networkGraph .vis-navigation .vis-zoomIn::before,
#networkGraph .vis-navigation .vis-zoomOut::before {

    width:
        13px;

    height:
        2px;

    border-radius:
        999px;

    background:
        #7666e8;

    transform:
        translate(-50%, -50%);

}


#networkGraph .vis-navigation .vis-zoomIn::after {

    width:
        2px;

    height:
        13px;

    border-radius:
        999px;

    background:
        #7666e8;

    transform:
        translate(-50%, -50%);

}


/* Fit / reset framing */

#networkGraph .vis-navigation .vis-zoomExtends::before {

    width:
        12px;

    height:
        12px;

    border:
        2px solid
        #7666e8;

    border-radius:
        3px;

    transform:
        translate(-50%, -50%);

}


/* Direction arrows */

#networkGraph .vis-navigation .vis-up::before,
#networkGraph .vis-navigation .vis-down::before,
#networkGraph .vis-navigation .vis-left::before,
#networkGraph .vis-navigation .vis-right::before {

    width:
        8px;

    height:
        8px;

    border-top:
        2px solid
        #7666e8;

    border-right:
        2px solid
        #7666e8;

}


#networkGraph .vis-navigation .vis-up::before {

    transform:
        translate(-50%, -35%)
        rotate(-45deg);

}


#networkGraph .vis-navigation .vis-down::before {

    transform:
        translate(-50%, -65%)
        rotate(135deg);

}


#networkGraph .vis-navigation .vis-left::before {

    transform:
        translate(-35%, -50%)
        rotate(-135deg);

}


#networkGraph .vis-navigation .vis-right::before {

    transform:
        translate(-65%, -50%)
        rotate(45deg);

}


html[data-theme="dark"]
#networkGraph .vis-navigation .vis-button {

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

    border-color:
        rgba(
            118,
            102,
            232,
            .38
        );

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            .24
        );

}


html[data-theme="dark"]
#networkGraph .vis-navigation .vis-button:hover {

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

    border-color:
        rgba(
            157,
            144,
            255,
            .72
        );

}


/* Slightly brighter purple in Dark Mode */

html[data-theme="dark"]
#networkGraph .vis-navigation .vis-zoomIn::before,
html[data-theme="dark"]
#networkGraph .vis-navigation .vis-zoomIn::after,
html[data-theme="dark"]
#networkGraph .vis-navigation .vis-zoomOut::before {

    background:
        #9b8cff;

}

html[data-theme="dark"]
#networkGraph .vis-navigation .vis-zoomExtends::before,
html[data-theme="dark"]
#networkGraph .vis-navigation .vis-up::before,
html[data-theme="dark"]
#networkGraph .vis-navigation .vis-down::before,
html[data-theme="dark"]
#networkGraph .vis-navigation .vis-left::before,
html[data-theme="dark"]
#networkGraph .vis-navigation .vis-right::before {

    border-color:
        #9b8cff;

}


/* ==========================================================
   NETWORK MAP HOVER CARDS + TALENT ACTIONS
========================================================== */

.network-map-hover-card {
    position:absolute;
    z-index:20;
    min-width:220px;
    max-width:310px;
    padding:12px 14px;
    border:1px solid rgba(112,125,155,.24);
    border-radius:16px;
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 34px rgba(35,45,68,.18);
    color:#252733;
    pointer-events:none;
    backdrop-filter:blur(10px);
}

.network-map-hover-card[hidden] { display:none; }

.network-map-hover-talent {
    display:flex;
    align-items:center;
    gap:11px;
}

.network-map-hover-talent img {
    width:42px;
    height:42px;
    flex:0 0 auto;
    object-fit:cover;
    border-radius:50%;
}

.network-map-hover-talent > div {
    min-width:0;
    display:grid;
    gap:3px;
    text-align:left;
}

.network-map-hover-talent strong {
    overflow:hidden;
    font-size:.88rem;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.network-map-hover-talent span {
    color:#7b8498;
    font-size:.72rem;
    line-height:1.35;
}

.network-map-hover-relation {
    min-width:230px;
    display:grid;
    justify-items:center;
    gap:8px;
}

.network-map-hover-pair {
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.network-map-hover-pair img {
    width:50px !important;
    height:50px !important;
    max-width:50px !important;
    max-height:50px !important;
    display:block;
    flex:0 0 50px;
    object-fit:cover;
    border:3px solid rgba(255,255,255,.96);
    border-radius:50%;
    box-shadow:0 5px 14px rgba(35,45,68,.16);
}

.network-map-hover-pair img + img {
    margin-left:-14px;
}

.network-map-hover-pair-names {
    max-width:270px;
    overflow:hidden;
    font-size:.82rem;
    line-height:1.3;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.network-map-hover-pair-names span {
    margin:0 5px;
    color:#8a93a4;
}

.network-map-hover-count {
    grid-column:1 / -1;
    margin-top:2px;
    padding-top:9px;
    border-top:1px solid rgba(112,125,155,.18);
    color:#7b8498;
    font-size:.73rem;
    text-align:center;
}

.network-map-hover-count strong {
    margin-right:4px;
    color:#7666e8;
    font-size:.92rem;
}



html[data-theme="dark"] .network-map-hover-card {
    border-color: rgba(120,132,160,.28);
    background: rgba(28,32,42,.96);
    box-shadow: 0 16px 36px rgba(0,0,0,.32);
    color: #f5f7fb;
}

html[data-theme="dark"] .network-map-hover-talent strong,
html[data-theme="dark"] .network-map-hover-pair-names {
    color: #f5f7fb;
}

html[data-theme="dark"] .network-map-hover-talent span,
html[data-theme="dark"] .network-map-hover-count,
html[data-theme="dark"] .network-map-hover-cross {
    color:#9ca5b8;
}

html[data-theme="dark"] .network-map-hover-count {
    border-top-color:rgba(130,143,174,.20);
}

@media(max-width:650px) {
    .network-map-hover-card {
        min-width:190px;
        max-width:250px;
        padding:10px 12px;
    }

    .network-talent-actions {
        flex-direction:column;
        align-items:stretch;
    }

    .network-talent-actions button {
        width:100%;
    }
}


html[data-theme="dark"] .network-map-hover-pair img {
    border-color:rgba(28,32,42,.96);
    box-shadow:0 5px 14px rgba(0,0,0,.30);
}


html[data-theme="dark"] .network-map-hover-pair-names span {
    color:#9ca5b8;
}