/* =========================
   HOME PAGE
========================= */

.home-hero {

    min-height:570px;

    padding:85px 20px 95px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;

}


.home-hero::before {

    content:"";

    width:420px;

    height:420px;

    position:absolute;

    top: 18px;

    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(110,198,255,.22),
        rgba(155,124,255,.08) 55%,
        transparent 72%
    );

    pointer-events:none;

}


.home-logo {

    width:250px;

    max-width:70vw;

    display:block;

    position:relative;

    filter:
    drop-shadow(
        0 16px 28px rgba(89,112,214,.2)
    );

}


.home-hero h1 {

    margin:5px 0 0;

    position:relative;

    font-size:58px;

    line-height:1.1;

    letter-spacing:-1.5px;

}


.home-tagline {

    max-width:650px;

    margin:20px auto 32px;

    position:relative;

    color:#667085;

    font-size:20px;

    line-height:1.6;

}


.primary-button,
.secondary-button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    font-weight:700;

    border-radius:16px;

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

}


.primary-button {

    padding:15px 25px;

    position:relative;

    color:white;

    background:
    linear-gradient(
        90deg,
        #50b8ff,
        #8d72ff
    );

    box-shadow:
    0 12px 28px rgba(103,124,255,.25);

}


.primary-button:hover {

    color:white;

    transform:translateY(-3px);

    box-shadow:
    0 16px 34px rgba(103,124,255,.34);

}


.secondary-button {

    flex-shrink:0;

    padding:13px 20px;

    color:#4d51a9;

    background:white;

    box-shadow:
        0 8px 22px rgba(71,79,142,.12);

}


.secondary-button:hover {

    color:#4d51a9;

    transform:translateY(-3px);

    box-shadow:
        0 12px 28px rgba(71,79,142,.18);

}


/* =========================
   SHARED HOME HEADINGS
========================= */

.home-section-heading {

    max-width:700px;

    margin:0 auto 40px;

    text-align:center;

}


.home-section-heading > span {

    color:#7666e8;

    font-size:13px;

    font-weight:800;

    letter-spacing:1.4px;

    text-transform:uppercase;

}


.home-section-heading h2 {

    margin:10px 0 12px;

    font-size:38px;

}


.home-section-heading p {

    margin:0;

    color:#667085;

    font-size:17px;

    line-height:1.6;

}


.home-section-action {

    margin-top:34px;

    text-align:center;

}


/* =========================
   LIVE DATABASE
========================= */

.home-statistics {

    padding:75px 30px 90px;

    background: transparent;

    border-bottom:
        1px solid rgba(218,226,238,.75);

}


.home-stats-grid {

    width:
        min(
            var(--content-default),
            100%
        );
    margin:0 auto;

    display:grid;

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

    gap:22px;

}


.home-stat-card {

    min-height:190px;

    padding:28px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(247,249,255,.82)
        );

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

    border-radius:24px;

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

    transition:
        transform .25s,
        box-shadow .25s;

}


.home-stat-card:hover {

    transform:translateY(-5px);

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

}


.home-stat-icon {

    margin-bottom:10px;

    font-size:30px;

}


.home-stat-card > strong {

    font-size:42px;

    line-height:1.1;

}


.home-stat-card > span:last-child {

    margin-top:7px;

    color:#667085;

}


.home-stat-card-wide {

    min-height:190px;

    grid-column:1 / -1;

    flex-direction:row;

    justify-content:center;

    gap:24px;

}


.home-stat-card-wide div {

    text-align:left;

}


.home-stat-label {

    display:block;

    color:#667085;

    font-size:14px;

}


.home-stat-card-wide strong {

    display:block;

    margin:4px 0;

    font-size:29px;

}


.home-stat-card-wide small {

    color:#8a93a4;

}


.most-connected-card {

    color:#222;

    text-decoration:none;

    cursor:pointer;

}


.most-connected-card:hover {

    color:#222;

    transform:translateY(-6px);

}


.most-connected-portrait {

    width:105px;

    height:105px;

    object-fit:cover;

    border-radius:24px;

    flex-shrink:0;

}


.most-connected-content {

    min-width:250px;

}


.most-connected-content strong {

    font-size:30px;

    line-height:1.15;

}


.most-connected-content small {

    color:#8a93a4;

    font-size:16px;

}


/* =========================
   LATEST COLLABORATIONS
========================= */

.home-latest {

    padding:85px 30px 75px;

}


.home-latest-grid {

    width:
        min(
            var(--content-wide),
            100%
        );

    margin:0 auto;

    display:grid;

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

    gap:22px;

}


.home-latest-card {

    min-width:0;

    overflow:hidden;

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

    border:
        1px solid rgba(210,220,238,.88);

    border-radius:24px;

    box-shadow:
        0 16px 38px rgba(45,60,92,.08);

    transition:
        transform .25s,
        box-shadow .25s;

}


.home-latest-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 46px rgba(45,60,92,.13);

}


.home-latest-thumbnail {

    display:block;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#eef3fb;

}


.home-latest-thumbnail img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .35s ease;

}


.home-latest-card:hover
.home-latest-thumbnail img {

    transform:
        scale(1.035);

}


.home-latest-body {

    padding:20px 21px 22px;

}


.home-latest-body time {

    color:#7380a0;

    font-size:13px;

    font-weight:700;

}


.home-latest-body h3 {

    min-height:52px;

    margin:8px 0 17px;

    display:-webkit-box;

    overflow:hidden;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    font-size:18px;

    line-height:1.45;

}


.home-latest-participants {

    min-height:68px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:7px;

}


.home-latest-participant {

    max-width:100%;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#273047;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

}


.home-latest-participant:hover {

    color:#6759dc;

}


.home-latest-participant img {

    width:30px;

    height:30px;

    flex:0 0 30px;

    object-fit:cover;

    border-radius:50%;

    border:
        1px solid rgba(169,180,211,.45);

}


.home-latest-participant span {

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.home-latest-times {

    display:none;

}


.home-latest-actions {

    margin-top:18px;

    padding-top:16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    border-top:
        1px solid rgba(220,226,238,.85);

}


.home-latest-duo-link,
.home-latest-youtube {

    text-decoration:none;

    font-size:13px;

    font-weight:800;

}


.home-latest-duo-link {

    color:#6657db;

}


.home-latest-youtube {

    color:#2d71df;

}


.home-latest-loading,
.home-latest-empty {

    grid-column:1 / -1;

    padding:50px 20px;

    color:#7b8497;

    text-align:center;

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

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

    border-radius:24px;

}


/* =========================
   EXPLORE HOLOCOLLABDEX
========================= */

.home-explore {

    padding:70px 30px 105px;

    background:
        transparent;

    border-top:
        1px solid rgba(218,226,238,.72);

}


.home-explore-grid {

    width:
        min(
            var(--content-wide),
            100%
        );

    margin:0 auto;

    display:grid;

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

    gap:26px;

}


.home-explore-card {

    min-width:0;

    overflow:hidden;

    color:#20283b;

    text-decoration:none;

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

    border:
        1px solid rgba(205,215,235,.9);

    border-radius:26px;

    box-shadow:
        0 18px 42px rgba(44,57,86,.08);

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

}


.home-explore-card:hover {

    color:#20283b;

    transform:
        translateY(-6px);

    border-color:
        rgba(127,112,235,.4);

    box-shadow:
        0 25px 55px rgba(44,57,86,.14);

}


.home-explore-preview {

    height:230px;

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #fbfcff,
            #f4f7fd
        );

    border-bottom:
        1px solid rgba(215,222,236,.8);

}


/* =========================
   NETWORK MINI PREVIEW
========================= */

.home-explore-preview-network {

    background:
        radial-gradient(
            circle at 50% 42%,
            #ffffff,
            #f4f7fd 72%
        );

}


.home-network-lines {

    width:100%;

    height:100%;

    position:absolute;

    inset:0;

}


.home-network-node {

    width:34px;

    height:34px;

    position:absolute;

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

    border-radius:50%;

    box-shadow:
        0 4px 10px rgba(59,70,112,.14);

}


.home-network-node img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    border-radius:50%;

    border:
        2px solid rgba(255,255,255,.96);

}


/* =========================
   HEATMAP MINI PREVIEW
========================= */

.home-explore-preview-heatmap {

    display:flex;

    align-items:flex-start;

    justify-content:center;

    padding:10px 12px;

}


.home-heatmap-grid {

    width:87%;

    height:96%;

    display:grid;

    grid-template-columns:
        34px repeat(
            var(--heatmap-size),
            minmax(0, 1fr)
        );

    grid-template-rows:
        30px repeat(
            var(--heatmap-size),
            28px
        );

    gap:4px;

    align-content:center;

}


.home-heatmap-avatar {

    aspect-ratio:1;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Column avatars live naturally in the first grid row.
   Do not offset them with translateY: that makes their position
   depend on the preview width and causes clipping at intermediate sizes. */
.home-heatmap-grid > .home-heatmap-avatar:nth-child(n + 2):nth-child(-n + 7) {
    align-self:center;
    transform:none;
}

.home-heatmap-avatar img {

    width:24px;

    height:24px;

    display:block;

    object-fit:cover;

    border-radius:50%;

    border:
        1px solid rgba(188,198,219,.7);

}


.home-heatmap-cell {

    min-width:0;

    min-height:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:5px;

    color:#29304b;

    background:#f4f6fa;

    font-size:10px;

    font-weight:800;

}


.home-heatmap-cell.is-diagonal {

    background:
        repeating-linear-gradient(
            135deg,
            #edf0f5 0,
            #edf0f5 3px,
            #f8f9fb 3px,
            #f8f9fb 6px
        );

}


.home-heatmap-cell.heat-1 {

    background:#e8f2ff;

}


.home-heatmap-cell.heat-2 {

    background:#d7e8ff;

}


.home-heatmap-cell.heat-3 {

    background:#bed5ff;

}


.home-heatmap-cell.heat-4 {

    color:#32296e;

    background:#a999ff;

}


.home-heatmap-cell.heat-5 {

    color:white;

    background:#7762ee;

}


/* =========================
   STATISTICS MINI PREVIEW
========================= */

.home-explore-preview-statistics {

    padding:18px;

    display:grid;

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

    gap:12px;

}


.home-stats-mini-column {

    min-width:0;

    padding:13px;

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

    border:
        1px solid rgba(218,224,237,.9);

    border-radius:14px;

}


.home-stats-mini-title {

    display:block;

    margin-bottom:8px;

    color:#2c3448;

    font-size:12px;

}


.home-stats-mini-row {

    min-height:32px;

    display:grid;

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

    align-items:center;

    gap:7px;

    border-top:
        1px solid rgba(228,232,241,.85);

    font-size:9px;

}


.home-stats-mini-row:first-of-type {

    border-top:0;

}


.home-stats-mini-row img {

    width:22px;

    height:22px;

    object-fit:cover;

    border-radius:50%;

}


.home-stats-mini-row span {

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.home-stats-mini-row strong {

    color:#4b4e70;

    font-size:10px;

}


.home-stats-mini-duo {

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

}


/* =========================
   TIMELINE MINI PREVIEW
========================= */

.home-explore-preview-timeline {

    padding:24px 16px 18px;

    display:grid;

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

    gap:12px;

}


.home-timeline-mini-line {

    height:2px;

    position:absolute;

    top:53px;

    left:12%;

    right:12%;

    background:
        linear-gradient(
            90deg,
            #9b8bf2,
            #6fb9ff
        );

    opacity:.55;

}


.home-timeline-mini-month {

    min-width:0;

    position:relative;

    text-align:center;

}


.home-timeline-mini-month > strong {

    display:block;

    height:27px;

    color:#404660;

    font-size:10px;

}


.home-timeline-mini-dot {

    width:9px;

    height:9px;

    margin:0 auto 13px;

    display:block;

    position:relative;

    z-index:2;

    border-radius:50%;

    background:#7762ee;

    box-shadow:
        0 0 0 4px rgba(119,98,238,.11);

}


.home-timeline-mini-cards {

    display:flex;

    flex-direction:column;

    gap:7px;

}


.home-timeline-mini-card {

    min-height:48px;

    padding:7px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:6px;

    background:white;

    border:
        1px solid rgba(220,226,239,.92);

    border-radius:10px;

    box-shadow:
        0 4px 12px rgba(53,64,96,.06);

}


.home-timeline-mini-avatars {

    display:flex;

    padding-left:4px;

}


.home-timeline-mini-avatars img {

    width:25px;

    height:25px;

    margin-left:-5px;

    object-fit:cover;

    border-radius:50%;

    border:
        2px solid white;

}


.home-timeline-mini-card > span {

    color:#6c748a;

    font-size:9px;

    font-weight:700;

}


.home-explore-content {

    padding:21px 23px 24px;

}


.home-explore-label {

    color:#7666e8;

    font-size:11px;

    font-weight:800;

    letter-spacing:1.15px;

    text-transform:uppercase;

}


.home-explore-content h3 {

    margin:8px 0 10px;

    font-size:25px;

}


.home-explore-content p {

    min-height:52px;

    margin:0;

    color:#667085;

    font-size:15px;

    line-height:1.6;

}


.home-explore-content strong {

    margin-top:20px;

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#5f55cf;

    font-size:14px;

}


/* =========================
   HOME RESPONSIVE
========================= */

/* Heatmap column avatars: default large desktop position */

/* HOME HEATMAP — RESPONSIVE COLUMN AVATAR POSITION
   The preview changes geometry at 1400px and again at 620px. */

@media (min-width: 1401px) {
}

@media (min-width: 621px) and (max-width: 1400px) {
}

@media (max-width: 620px) {
}

@media(max-width:900px) {

    .home-latest-grid {

        grid-template-columns:1fr;

        max-width:650px;

    }


    .home-latest-participants {

        min-height:0;

    }


}


@media(max-width:800px) {

    .home-hero {

        min-height:auto;

        padding:65px 20px 75px;

    }


    .home-hero h1 {

        font-size:44px;

    }


    .home-tagline {

        font-size:17px;

    }


    .home-stats-grid {

        grid-template-columns:1fr;

    }


    .home-stat-card-wide {

        grid-column:auto;

    }


    .home-explore-grid {

        grid-template-columns:1fr;

        max-width:650px;

    }

}


@media(max-width:700px) {

    .most-connected-card {

        flex-direction:column;

    }


    .most-connected-content {

        min-width:0;

        text-align:center;

    }


    .most-connected-portrait {

        width:100px;

        height:100px;

    }

}


@media(max-width:500px) {

    .home-hero {

        padding:
            30px 18px 42px;

    }


    .home-logo {

        width:
            140px;

    }


    .home-hero h1 {

        margin-top:
            2px;

        font-size:
            34px;

        letter-spacing:
            -1px;

    }


    .home-tagline {

        margin:
            12px auto 20px;

        font-size:
            16px;

        line-height:
            1.5;

    }


    .primary-button {

        padding:
            13px 21px;

    }


    .home-statistics,
    .home-latest,
    .home-explore {

        padding-left:
            18px;

        padding-right:
            18px;

    }


    .home-statistics {

        padding-top:
            50px;

        padding-bottom:
            60px;

    }


    .home-latest,
    .home-explore {

        padding-top:
            60px;

        padding-bottom:
            70px;

    }


    .home-section-heading {

        margin-bottom:
            30px;

    }


    .home-section-heading h2 {

        font-size:
            28px;

        line-height:
            1.2;

    }


    .home-section-heading p {

        font-size:
            15px;

        line-height:
            1.5;

    }


    .home-stat-card {

        padding:
            26px 18px;

    }


    .home-stat-card strong {

        font-size:
            42px;

    }


    .home-stat-card span {

        font-size:
            15px;

    }


    /* =========================
    MOBILE LATEST COLLABORATIONS
    ========================= */

    .home-latest-grid {

        gap:
            14px;

    }


    .home-latest-card {

        display:grid;

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

        border-radius:
            18px;

    }


    .home-latest-thumbnail {

        margin:
            14px 0 14px 14px;

        align-self:center;

        aspect-ratio:
            16 / 9;

        border-radius:
            12px;

    }


    .home-latest-body {

        min-width:0;

        padding:
            14px 14px 14px 12px;

    }


    .home-latest-body time {

        font-size:
            11px;

    }


    .home-latest-body h3 {

        min-height:0;

        margin:
            5px 0 9px;

        font-size:
            14px;

        line-height:
            1.35;

        -webkit-line-clamp:
            2;

    }


    .home-latest-participants {

        min-height:0;

        flex-direction:column;

        align-items: flex-start;

        gap: 6px;

    }


    .home-latest-participant {

        gap:
            5px;

        font-size:
            11px;

    }


    .home-latest-participant img {

        width:
            22px;

        height:
            22px;

        flex:
            0 0 22px;

    }


    .home-latest-actions {

        margin-top:
            10px;

        padding-top:
            9px;

        gap:
            8px;

    }


    .home-latest-duo-link,
    .home-latest-youtube {

        font-size:
            11px;

    }


    .home-explore-content {

        padding:
            22px 21px 24px;

    }


    .home-explore-content h3 {

        font-size:
            24px;

    }


    .home-explore-content p {

        min-height:0;

    }

    /* =========================
       MOBILE LIVE DATABASE 2x2
    ========================= */

    .home-stats-grid {

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

        gap:12px;

    }


    .home-stat-card {

        min-height:145px;

        padding:16px 10px;

        border-radius:20px;

    }


    .home-stat-icon {

        margin-bottom:6px;

        font-size:22px;

    }


    .home-stat-card > strong {

        font-size:32px;

    }


    .home-stat-card > span:last-child {

        margin-top:5px;

        font-size:12px;

        line-height:1.3;

    }


    .home-stat-card-wide {

        min-height:145px;

        grid-column:auto;

        flex-direction:column;

        gap:8px;

    }


    .most-connected-portrait {

        width:52px;

        height:52px;

        border-radius:14px;

    }


    .most-connected-content {

        min-width:0;

        text-align:center;

    }


    .home-stat-label {

        font-size:10px;

    }


    .most-connected-content strong {

        margin:2px 0;

        font-size:16px;

        line-height:1.15;

    }


    .most-connected-content small {

        font-size:11px;

    }

    .most-connected-card {

        align-items:center;

        justify-content:center;

        text-align:center;

    }


    .most-connected-content {

        width:100%;

        min-width:0;

        display:flex;

        flex-direction:column;

        align-items:center;

        text-align:center;

    }


    .most-connected-content .home-stat-label {

        width:100%;

        text-align:center;

        white-space:nowrap;

    }


    .most-connected-content strong {

        width:100%;

        margin:3px 0;

        text-align:center;

        font-size:16px;

        line-height:1.15;

    }


    .most-connected-content small {

        width:100%;

        text-align:center;

        font-size:11px;

    }
}


@media(max-width:620px) {

    .home-explore-preview {

        height:205px;

    }


    .home-network-node {

        width:30px;

        height:30px;

    }


    .home-explore-preview-heatmap {

        padding:12px;

    }


    .home-heatmap-grid {

        width:100%;

        height:100%;

        grid-template-columns:
            25px repeat(
                var(--heatmap-size),
                minmax(0, 1fr)
            );

        grid-template-rows:
            24px repeat(
                var(--heatmap-size),
                23px
            );

        gap:2px;

        align-content:center;

    }


    .home-heatmap-avatar img {

        width:21px;

        height:21px;

    }


    .home-heatmap-cell {

        font-size:8px;

        border-radius:4px;

    }


    .home-explore-preview-statistics {

        padding:12px;

        gap:8px;

    }


    .home-stats-mini-column {

        padding:9px;

    }


    .home-stats-mini-row {

        min-height:29px;

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

        gap:5px;

        font-size:8px;

    }


    .home-stats-mini-row img {

        width:19px;

        height:19px;

    }


    .home-stats-mini-duo {

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

    }


    .home-explore-preview-timeline {

        padding-left:10px;

        padding-right:10px;

        gap:7px;

    }


    .home-timeline-mini-card {

        padding:5px;

    }


    .home-timeline-mini-avatars img {

        width:21px;

        height:21px;

    }

}

/* ==========================================================
   HOME — DARK MODE
   ========================================================== */

html[data-theme="dark"] .home-tagline,
html[data-theme="dark"] .home-section-heading p,
html[data-theme="dark"] .home-stat-card > span:last-child,
html[data-theme="dark"] .home-stat-label,
html[data-theme="dark"] .most-connected-content small,
html[data-theme="dark"] .home-explore-content p {
    color: var(--text-secondary);
}


/* Live database */

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

html[data-theme="dark"] .home-stat-card {
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--surface-primary) 96%, transparent),
            color-mix(in srgb, var(--surface-secondary) 92%, transparent)
        );
    border-color: var(--border-primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .07);
}

html[data-theme="dark"] .home-stat-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .11);
}

html[data-theme="dark"] .most-connected-card,
html[data-theme="dark"] .most-connected-card:hover {
    color: var(--text-primary);
}


/* Latest collaborations */

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

html[data-theme="dark"] .home-latest-card:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .11);
}

html[data-theme="dark"] .home-latest-thumbnail {
    background: var(--surface-secondary);
}

html[data-theme="dark"] .home-latest-body time {
    color: var(--text-muted);
}

html[data-theme="dark"] .home-latest-participant {
    color: var(--text-primary);
}

html[data-theme="dark"] .home-latest-participant:hover {
    color: #9b8cff;
}

html[data-theme="dark"] .home-latest-participant img {
    border-color: var(--border-primary);
}

html[data-theme="dark"] .home-latest-actions {
    border-top-color: var(--border-primary);
}

html[data-theme="dark"] .home-latest-duo-link {
    color: #9b8cff;
}

html[data-theme="dark"] .home-latest-youtube {
    color: #72a7ff;
}

html[data-theme="dark"] .home-latest-loading,
html[data-theme="dark"] .home-latest-empty {
    color: var(--text-muted);
    background: var(--surface-primary);
    border-color: var(--border-primary);
}


/* Explore */

html[data-theme="dark"] .home-explore {
    border-top-color: var(--border-primary);
}

html[data-theme="dark"] .home-explore-card,
html[data-theme="dark"] .home-explore-card:hover {
    color: var(--text-primary);
}

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

html[data-theme="dark"] .home-explore-card:hover {
    border-color: rgba(157, 144, 255, .42);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .11);
}

html[data-theme="dark"] .home-explore-preview {
    background:
        linear-gradient(
            180deg,
            var(--surface-secondary),
            var(--surface-primary)
        );
    border-bottom-color: var(--border-primary);
}


/* Network preview */

html[data-theme="dark"] .home-explore-preview-network {
    background:
        radial-gradient(
            circle at 50% 42%,
            color-mix(in srgb, var(--surface-secondary) 92%, #7666e8 8%),
            var(--surface-primary) 72%
        );
}

html[data-theme="dark"] .home-network-node {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .home-network-node img {
    border-color: var(--surface-secondary);
}


/* Heatmap preview */

html[data-theme="dark"] .home-heatmap-avatar img {
    border-color: var(--border-primary);
}

html[data-theme="dark"] .home-heatmap-cell {
    color: var(--text-secondary);
    background: var(--surface-secondary);
}

html[data-theme="dark"] .home-heatmap-cell.is-diagonal {
    background:
        repeating-linear-gradient(
            135deg,
            var(--surface-secondary) 0,
            var(--surface-secondary) 3px,
            var(--surface-hover) 3px,
            var(--surface-hover) 6px
        );
}

html[data-theme="dark"] .home-heatmap-cell.heat-1 {
    background: #253650;
}

html[data-theme="dark"] .home-heatmap-cell.heat-2 {
    background: #304b72;
}

html[data-theme="dark"] .home-heatmap-cell.heat-3 {
    color: #eef4ff;
    background: #45679a;
}

html[data-theme="dark"] .home-heatmap-cell.heat-4 {
    color: #f3f0ff;
    background: #6758aa;
}

html[data-theme="dark"] .home-heatmap-cell.heat-5 {
    color: white;
    background: #7762ee;
}


/* Statistics preview */

html[data-theme="dark"] .home-stats-mini-column {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
}

html[data-theme="dark"] .home-stats-mini-title {
    color: var(--text-primary);
}

html[data-theme="dark"] .home-stats-mini-row {
    border-top-color: var(--border-primary);
}

html[data-theme="dark"] .home-stats-mini-row strong {
    color: var(--text-secondary);
}


/* Timeline preview */

html[data-theme="dark"] .home-timeline-mini-month > strong {
    color: var(--text-secondary);
}

html[data-theme="dark"] .home-timeline-mini-card {
    background: var(--surface-secondary);
    border-color: var(--border-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .home-timeline-mini-avatars img {
    border-color: var(--surface-secondary);
}

html[data-theme="dark"] .home-timeline-mini-card > span {
    color: var(--text-muted);
}



/*
==========================================================
DARK THEME — HOME HERO GLOW CENTERING
==========================================================
*/

html[data-theme="dark"] .home-logo {
    filter:
        drop-shadow(
            0 0 24px
            rgba(91, 177, 255, .18)
        );
}

html[data-theme="dark"] .home-hero .primary-button {
    box-shadow:
        0 0 26px
        rgba(103, 124, 255, .22);
}

html[data-theme="dark"] .home-hero .primary-button:hover {
    box-shadow:
        0 0 32px
        rgba(103, 124, 255, .30);
}