/* CYBERPUNK 2045 // CENTRAL HUB */

/* =========================================================
   40. NIGHT CITY CENTRAL HUB — V1
   ========================================================= */

/* =========================================================
   40A. SCREEN SYSTEM
   ========================================================= */

.screen-hidden {
    display: none !important;
}

.hub-screen {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;

    display: grid;

    grid-template-columns:
        minmax(210px, 270px)
        minmax(520px, 1fr)
        minmax(210px, 270px);

    gap: 18px;

    padding:
        22px 24px 54px;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(0, 240, 255, .075),
            transparent 24%
        ),
        radial-gradient(
            circle at 50% 62%,
            rgba(255, 43, 214, .045),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #030a10 0%,
            #02070b 48%,
            #010305 100%
        );
}


/* =========================================================
   40B. BACKGROUND
   ========================================================= */

.hub-background {
    position: absolute;
    inset: 0;

    z-index: -5;

    overflow: hidden;

    pointer-events: none;
}


/* atmospheric cyan light */

.hub-background::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 16%;

    width: 760px;
    height: 520px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 240, 255, .09) 0%,
            rgba(0, 169, 199, .035) 34%,
            transparent 70%
        );

    filter:
        blur(12px);

    animation:
        hubAtmosphere
        8s
        ease-in-out
        infinite;
}


/* magenta secondary glow */

.hub-background::after {
    content: "";

    position: absolute;

    right: 7%;
    top: 15%;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(255, 43, 214, .055),
            transparent 68%
        );

    filter:
        blur(20px);
}


/* =========================================================
   40C. PROCEDURAL NIGHT CITY SKYLINE
   ========================================================= */

.hub-skyline {
    position: absolute;

    left: 0;
    right: 0;

    pointer-events: none;
}


/* distant buildings */

.hub-skyline-back {
    bottom: 18%;

    height: 36%;

    opacity: .20;

    background:
        linear-gradient(
            90deg,
            transparent 0 2%,
            #0a2530 2% 5%,
            transparent 5% 7%,
            #071b24 7% 11%,
            transparent 11% 13%,
            #0a2833 13% 16%,
            transparent 16% 19%,
            #061821 19% 23%,
            transparent 23% 25%,
            #092731 25% 31%,
            transparent 31% 33%,
            #071d26 33% 37%,
            transparent 37% 39%,
            #0b2b36 39% 44%,
            transparent 44% 46%,
            #071a22 46% 51%,
            transparent 51% 54%,
            #092631 54% 60%,
            transparent 60% 63%,
            #071b24 63% 68%,
            transparent 68% 70%,
            #0a2833 70% 75%,
            transparent 75% 78%,
            #061821 78% 83%,
            transparent 83% 86%,
            #09242e 86% 91%,
            transparent 91% 94%,
            #071a22 94% 98%,
            transparent 98%
        );

    clip-path:
        polygon(
            0 100%,
            0 58%,
            3% 58%,
            3% 28%,
            5% 28%,
            5% 65%,
            9% 65%,
            9% 40%,
            11% 40%,
            11% 70%,
            15% 70%,
            15% 18%,
            17% 18%,
            17% 55%,
            22% 55%,
            22% 35%,
            25% 35%,
            25% 62%,
            30% 62%,
            30% 12%,
            33% 12%,
            33% 48%,
            38% 48%,
            38% 27%,
            41% 27%,
            41% 68%,
            46% 68%,
            46% 5%,
            49% 5%,
            49% 54%,
            54% 54%,
            54% 22%,
            58% 22%,
            58% 64%,
            63% 64%,
            63% 33%,
            66% 33%,
            66% 57%,
            71% 57%,
            71% 16%,
            74% 16%,
            74% 52%,
            80% 52%,
            80% 31%,
            83% 31%,
            83% 69%,
            88% 69%,
            88% 21%,
            91% 21%,
            91% 60%,
            96% 60%,
            96% 39%,
            100% 39%,
            100% 100%
        );
}


/* foreground skyline */

.hub-skyline-front {
    bottom: 10%;

    height: 29%;

    opacity: .36;

    background:
        repeating-linear-gradient(
            90deg,
            #03141b 0,
            #03141b 38px,
            #041a22 39px,
            #041a22 61px,
            #020b10 62px,
            #020b10 91px
        );

    clip-path:
        polygon(
            0 100%,
            0 66%,
            5% 66%,
            5% 35%,
            8% 35%,
            8% 75%,
            13% 75%,
            13% 48%,
            17% 48%,
            17% 72%,
            22% 72%,
            22% 25%,
            25% 25%,
            25% 64%,
            31% 64%,
            31% 43%,
            35% 43%,
            35% 79%,
            40% 79%,
            40% 52%,
            44% 52%,
            44% 70%,
            50% 70%,
            50% 31%,
            54% 31%,
            54% 73%,
            60% 73%,
            60% 46%,
            64% 46%,
            64% 67%,
            70% 67%,
            70% 29%,
            74% 29%,
            74% 74%,
            80% 74%,
            80% 49%,
            84% 49%,
            84% 69%,
            90% 69%,
            90% 38%,
            94% 38%,
            94% 72%,
            100% 72%,
            100% 100%
        );

    box-shadow:
        0 -1px 0
        rgba(0, 240, 255, .15);
}


/* =========================================================
   40D. PERSPECTIVE GRID
   ========================================================= */

.hub-ground-grid {
    position: absolute;

    left: -20%;
    right: -20%;
    bottom: -19%;

    height: 56%;

    opacity: .18;

    transform:
        perspective(500px)
        rotateX(63deg);

    transform-origin:
        center bottom;

    background-image:
        linear-gradient(
            rgba(0, 240, 255, .25) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .25) 1px,
            transparent 1px
        );

    background-size:
        48px 34px;

    mask-image:
        linear-gradient(
            to top,
            #000 18%,
            transparent 90%
        );
}


/* =========================================================
   40E. VIGNETTE / SCAN
   ========================================================= */

.hub-vignette {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            transparent 28%,
            rgba(0, 0, 0, .25) 65%,
            rgba(0, 0, 0, .72) 100%
        );
}


.hub-scanline {
    position: absolute;

    z-index: 8;

    left: 0;
    top: -12%;

    width: 100%;
    height: 8%;

    opacity: .65;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 240, 255, .05),
            transparent
        );

    animation:
        hubScan
        9s
        linear
        infinite;
}


/* =========================================================
   40F. MICRO LABELS
   ========================================================= */

.hub-sector-label {
    position: absolute;

    z-index: 3;

    top: 13px;

    color:
        rgba(0, 240, 255, .32);

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    letter-spacing:
        2px;

    pointer-events:
        none;
}


.hub-sector-label-left {
    left: 25px;
}


.hub-sector-label-right {
    right: 25px;

    color:
        rgba(255, 43, 214, .34);
}


/* =========================================================
   41. SIDE TERMINALS
   ========================================================= */

.hub-terminal {
    position: relative;

    z-index: 10;

    align-self:
        center;

    width:
        100%;

    min-height:
        390px;

    padding:
        17px 16px;

    border:
        1px solid
        rgba(0, 240, 255, .15);

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 22, .80),
            rgba(2, 7, 11, .70)
        );

    backdrop-filter:
        blur(7px);

    box-shadow:
        inset 0 0 35px
        rgba(0, 240, 255, .025),
        0 15px 50px
        rgba(0, 0, 0, .25);

    clip-path:
        polygon(
            0 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% 100%,
            18px 100%,
            0 calc(100% - 18px)
        );

    animation:
        hubTerminalIn
        .65s
        ease
        both;
}


.hub-terminal-right {
    animation-delay:
        .12s;
}


.hub-terminal::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 38%;
    height: 2px;

    background:
        var(--cyan);

    box-shadow:
        0 0 12px
        rgba(0, 240, 255, .6);
}


.hub-terminal-right::before {
    left: auto;
    right: 0;

    background:
        var(--pink);

    box-shadow:
        0 0 12px
        rgba(255, 43, 214, .5);
}


.hub-terminal-header {
    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        13px;

    border-bottom:
        1px solid
        rgba(0, 240, 255, .12);
}


.hub-terminal-header span {
    color:
        #82b4bd;

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        1.6px;
}


.hub-terminal-header strong {
    color:
        var(--cyan);

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.hub-user-symbol {
    display:
        grid;

    place-items:
        center;

    height:
        112px;
}


.hub-user-ring {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    width:
        70px;

    height:
        70px;

    border:
        1px solid
        rgba(0, 240, 255, .34);

    border-radius:
        50%;

    box-shadow:
        inset 0 0 22px
        rgba(0, 240, 255, .08),
        0 0 20px
        rgba(0, 240, 255, .08);

    animation:
        hubUserPulse
        3s
        ease-in-out
        infinite;
}


.hub-user-ring::before {
    content: "";

    position:
        absolute;

    inset:
        7px;

    border:
        1px dashed
        rgba(0, 240, 255, .22);

    border-radius:
        50%;

    animation:
        hubSpin
        14s
        linear
        infinite;
}


.hub-user-ring span {
    color:
        var(--cyan);

    font-size:
        27px;

    text-shadow:
        0 0 14px
        rgba(0, 240, 255, .6);
}


.hub-terminal-code {
    color:
        var(--cyan);

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    letter-spacing:
        1.5px;
}


.hub-terminal-name {
    margin-top:
        7px;

    color:
        #eaffff;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        1.2px;
}


.hub-terminal-line {
    height:
        1px;

    margin:
        15px 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .4),
            rgba(0, 240, 255, .03)
        );
}


.hub-terminal-data,
.hub-live-data {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.hub-terminal-data > div,
.hub-live-data > div {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        rgba(0, 240, 255, .06);
}


.hub-terminal-data span,
.hub-live-data span {
    color:
        #547981;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.hub-terminal-data strong,
.hub-live-data strong {
    color:
        #bde9ed;

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    font-weight:
        700;

    text-align:
        right;
}


.hub-warning {
    color:
        var(--yellow) !important;
}


.hub-online {
    color:
        var(--cyan) !important;

    text-shadow:
        0 0 7px
        rgba(0, 240, 255, .35);
}


/* =========================================================
   41B. MINI ACTION
   ========================================================= */

.hub-mini-action {
    position:
        relative;

    width:
        100%;

    height:
        35px;

    margin-top:
        17px;

    border:
        1px solid
        rgba(0, 240, 255, .22);

    background:
        rgba(0, 240, 255, .035);

    color:
        #6d9da6;

    cursor:
        pointer;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

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


.hub-mini-action:hover {
    color:
        #eaffff;

    border-color:
        var(--cyan);

    background:
        rgba(0, 240, 255, .10);

    box-shadow:
        inset 0 0 20px
        rgba(0, 240, 255, .06),
        0 0 12px
        rgba(0, 240, 255, .08);
}


/* =========================================================
   41C. NETWORK PULSE
   ========================================================= */

.hub-network-pulse {
    display:
        flex;

    align-items:
        flex-end;

    height:
        80px;

    padding:
        14px 0 10px;
}


.hub-pulse-bar {
    display:
        flex;

    align-items:
        flex-end;

    width:
        100%;

    height:
        44px;

    gap:
        5px;
}


.hub-pulse-bar i {
    flex:
        1;

    min-width:
        3px;

    background:
        linear-gradient(
            180deg,
            var(--cyan),
            rgba(0, 240, 255, .08)
        );

    box-shadow:
        0 0 6px
        rgba(0, 240, 255, .22);

    transform-origin:
        center bottom;

    animation:
        hubEqualizer
        1.4s
        ease-in-out
        infinite;
}


.hub-pulse-bar i:nth-child(1) {
    height: 30%;
    animation-delay: -.1s;
}

.hub-pulse-bar i:nth-child(2) {
    height: 75%;
    animation-delay: -.6s;
}

.hub-pulse-bar i:nth-child(3) {
    height: 45%;
    animation-delay: -.3s;
}

.hub-pulse-bar i:nth-child(4) {
    height: 90%;
    animation-delay: -.8s;
}

.hub-pulse-bar i:nth-child(5) {
    height: 58%;
    animation-delay: -.2s;
}

.hub-pulse-bar i:nth-child(6) {
    height: 80%;
    animation-delay: -.7s;
}

.hub-pulse-bar i:nth-child(7) {
    height: 36%;
    animation-delay: -.4s;
}

.hub-pulse-bar i:nth-child(8) {
    height: 67%;
    animation-delay: -.9s;
}


/* =========================================================
   41D. SYSTEM FEED
   ========================================================= */

.hub-feed {
    font-family:
        Consolas,
        monospace;
}


.hub-feed-title {
    margin-bottom:
        11px;

    color:
        #658e96;

    font-size:
        7px;

    letter-spacing:
        1.6px;
}


.hub-feed p {
    margin:
        7px 0;

    color:
        #5f8d95;

    font-size:
        7px;

    line-height:
        1.4;

    letter-spacing:
        .5px;
}


.hub-feed p span {
    margin-right:
        6px;

    color:
        var(--cyan);

    text-shadow:
        0 0 6px
        var(--cyan);
}


.hub-feed .hub-feed-locked {
    color:
        #786f46;
}


.hub-feed .hub-feed-locked span {
    color:
        var(--yellow);

    text-shadow:
        0 0 6px
        rgba(247, 255, 0, .45);
}


/* =========================================================
   42. CENTRAL NETWORK
   ========================================================= */

.hub-network {
    position:
        relative;

    z-index:
        6;

    align-self:
        stretch;

    min-width:
        0;

    min-height:
        0;

    animation:
        hubNetworkIn
        .8s
        ease
        both;
}


.hub-network-title {
    position:
        absolute;

    z-index:
        20;

    top:
        4%;

    left:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    transform:
        translateX(-50%);

    text-align:
        center;

    pointer-events:
        none;
}


.hub-network-title small {
    color:
        var(--cyan);

    font-size:
        7px;

    letter-spacing:
        4px;
}


.hub-network-title strong {
    margin-top:
        5px;

    color:
        #eaffff;

    font-size:
        clamp(15px, 1.4vw, 21px);

    font-style:
        italic;

    font-weight:
        900;

    letter-spacing:
        2px;

    text-shadow:
        0 0 15px
        rgba(0, 240, 255, .12);
}


.hub-network-title span {
    margin-top:
        5px;

    color:
        var(--yellow);

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    letter-spacing:
        2px;
}


/* =========================================================
   43. CENTRAL CORE
   ========================================================= */

.hub-core {
    position:
        absolute;

    z-index:
        10;

    left:
        50%;

    top:
        48%;

    width:
        clamp(190px, 20vw, 270px);

    aspect-ratio:
        1;

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

    border-radius:
        50%;

    transition:
        filter .25s ease,
        transform .25s ease;
}


.hub-core::before {
    content: "";

    position:
        absolute;

    inset:
        21%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, .16),
            rgba(0, 240, 255, .035) 42%,
            transparent 72%
        );

    box-shadow:
        0 0 55px
        rgba(0, 240, 255, .08);

    animation:
        hubCoreGlow
        3.2s
        ease-in-out
        infinite;
}


.hub-core-orbit {
    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;
}


.hub-core-orbit-a {
    inset:
        0;

    border:
        1px solid
        rgba(0, 240, 255, .27);

    border-top-color:
        var(--cyan);

    border-right-color:
        transparent;

    animation:
        hubSpin
        16s
        linear
        infinite;
}


.hub-core-orbit-b {
    inset:
        10%;

    border:
        1px dashed
        rgba(255, 43, 214, .24);

    border-left-color:
        var(--pink);

    animation:
        hubSpinReverse
        11s
        linear
        infinite;
}


.hub-core-orbit-c {
    inset:
        22%;

    border:
        1px solid
        rgba(247, 255, 0, .17);

    border-bottom-color:
        var(--yellow);

    animation:
        hubSpin
        8s
        linear
        infinite;
}


.hub-core-cross {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 240, 255, .26),
            transparent
        );
}


.hub-core-cross-a {
    width:
        126%;

    height:
        1px;

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


.hub-core-cross-b {
    width:
        126%;

    height:
        1px;

    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


.hub-core-center {
    position:
        absolute;

    z-index:
        6;

    inset:
        29%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(0, 240, 255, .32);

    border-radius:
        50%;

    background:
        rgba(2, 12, 17, .88);

    box-shadow:
        inset 0 0 28px
        rgba(0, 240, 255, .10),
        0 0 22px
        rgba(0, 240, 255, .06);

    backdrop-filter:
        blur(5px);
}


.hub-core-center small {
    color:
        #59838b;

    font-size:
        6px;

    letter-spacing:
        2px;
}


.hub-core-center > strong {
    margin:
        4px 0;

    color:
        #eaffff;

    font-family:
        Consolas,
        monospace;

    font-size:
        clamp(14px, 1.5vw, 20px);

    letter-spacing:
        1px;

    text-shadow:
        0 0 12px
        rgba(0, 240, 255, .35);
}


.hub-core-center > strong span {
    color:
        var(--yellow);
}


.hub-core-status {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    color:
        var(--cyan);

    font-size:
        5px;

    letter-spacing:
        1px;
}


.hub-core-status i {
    width:
        4px;

    height:
        4px;

    border-radius:
        50%;

    background:
        var(--cyan);

    box-shadow:
        0 0 7px
        var(--cyan);

    animation:
        pulse
        1.5s
        infinite;
}


.hub-core-coordinate {
    position:
        absolute;

    color:
        rgba(0, 240, 255, .35);

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        1px;
}


.hub-coordinate-a {
    left: 5%;
    top: 48%;
}


.hub-coordinate-b {
    right: 0;
    bottom: 27%;
}


/* =========================================================
   44. NETWORK LINKS
   ========================================================= */

.hub-link {
    position:
        absolute;

    z-index:
        3;

    left:
        50%;

    top:
        48%;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 240, 255, .34),
            transparent
        );

    box-shadow:
        0 0 6px
        rgba(0, 240, 255, .12);

    transform-origin:
        left center;

    opacity:
        .58;
}


.hub-link::after {
    content: "";

    position:
        absolute;

    top:
        -1px;

    width:
        28px;

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--cyan),
            transparent
        );

    filter:
        drop-shadow(
            0 0 4px
            var(--cyan)
        );

    animation:
        hubDataTravel
        2.4s
        linear
        infinite;
}


.hub-link-top {
    width:
        22%;

    height:
        1px;

    transform:
        rotate(-90deg);
}


.hub-link-bottom {
    width:
        22%;

    height:
        1px;

    transform:
        rotate(90deg);
}


.hub-link-left {
    width:
        28%;

    height:
        1px;

    transform:
        rotate(180deg);
}


.hub-link-right {
    width:
        28%;

    height:
        1px;
}


/* =========================================================
   45. HUB NODES
   ========================================================= */

.hub-node {
    position:
        absolute;

    z-index:
        18;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    min-width:
        178px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(0, 240, 255, .13);

    background:
        linear-gradient(
            90deg,
            rgba(2, 12, 17, .90),
            rgba(2, 8, 12, .72)
        );

    cursor:
        pointer;

    outline:
        none;

    clip-path:
        polygon(
            0 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% 100%,
            10px 100%,
            0 calc(100% - 10px)
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}


.hub-node:hover,
.hub-node:focus {
    border-color:
        rgba(0, 240, 255, .65);

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .13),
            rgba(2, 10, 15, .86)
        );

    box-shadow:
        inset 0 0 24px
        rgba(0, 240, 255, .05),
        0 0 18px
        rgba(0, 240, 255, .08);

    transform:
        translateY(-2px);
}


.hub-node-online {
    border-color:
        rgba(247, 255, 0, .22);
}


.hub-node-online:hover,
.hub-node-online:focus {
    border-color:
        var(--yellow);

    box-shadow:
        inset 0 0 25px
        rgba(247, 255, 0, .04),
        0 0 18px
        rgba(247, 255, 0, .09);
}


.hub-node-icon {
    display:
        grid;

    place-items:
        center;

    flex:
        0 0 35px;

    width:
        35px;

    height:
        35px;

    border:
        1px solid
        rgba(0, 240, 255, .25);

    color:
        var(--cyan);

    font-size:
        17px;

    text-shadow:
        0 0 9px
        rgba(0, 240, 255, .65);
}


.hub-node-online .hub-node-icon {
    border-color:
        rgba(247, 255, 0, .28);

    color:
        var(--yellow);

    text-shadow:
        0 0 9px
        rgba(247, 255, 0, .55);
}


.hub-node-copy {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.hub-node-copy small {
    color:
        #4e727a;

    font-size:
        5px;

    letter-spacing:
        1.2px;
}


.hub-node-copy strong {
    margin:
        2px 0;

    color:
        #dffcff;

    font-size:
        10px;

    letter-spacing:
        1.3px;
}


.hub-node-copy span {
    color:
        #53777f;

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        .5px;

    white-space:
        nowrap;
}


.hub-node-top {
    left:
        50%;

    top:
        16%;

    transform:
        translateX(-50%);
}


.hub-node-top:hover,
.hub-node-top:focus {
    transform:
        translateX(-50%)
        translateY(-2px);
}


.hub-node-bottom {
    left:
        50%;

    /* Keep HOLOMAP clear of the dynamic hover preview below. */
    bottom:
        21%;

    transform:
        translateX(-50%);
}


.hub-node-bottom:hover,
.hub-node-bottom:focus {
    transform:
        translateX(-50%)
        translateY(-2px);
}


.hub-node-left {
    left:
        3%;

    top:
        45%;
}


.hub-node-right {
    right:
        3%;

    top:
        45%;
}


/* =========================================================
   45A. ADMINISTRATION NODE
   ========================================================= */

.hub-node-admin {
    right:
        3%;

    bottom:
        15%;

    min-width:
        175px;

    border-color:
        rgba(255, 49, 85, .20);

    background:
        linear-gradient(
            90deg,
            rgba(255, 49, 85, .055),
            rgba(2, 8, 12, .76)
        );
}


.hub-node-admin .hub-node-icon {
    border-color:
        rgba(255, 49, 85, .32);

    color:
        var(--red);

    text-shadow:
        0 0 9px
        rgba(255, 49, 85, .55);
}


.hub-node-admin:hover,
.hub-node-admin:focus {
    border-color:
        var(--red);

    background:
        linear-gradient(
            90deg,
            rgba(255, 49, 85, .15),
            rgba(2, 10, 15, .86)
        );

    box-shadow:
        inset 0 0 24px
        rgba(255, 49, 85, .05),
        0 0 18px
        rgba(255, 49, 85, .10);

    transform:
        translateY(-2px);
}


.hub-node-admin:hover .hub-node-icon,
.hub-node-admin:focus .hub-node-icon {
    color:
        #ff8298;
}


/* =========================================================
   46. MODULE PREVIEW
   ========================================================= */

.hub-module-preview {
    position:
        absolute;

    z-index:
        15;

    left:
        50%;

    bottom:
        3%;

    width:
        min(420px, 66%);

    transform:
        translateX(-50%);

    padding:
        9px 14px;

    border-top:
        1px solid
        rgba(0, 240, 255, .13);

    text-align:
        center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(2, 10, 15, .55),
            transparent
        );

    pointer-events:
        none;
}


.hub-module-preview small {
    display:
        block;

    color:
        var(--cyan);

    font-size:
        5px;

    letter-spacing:
        2px;
}


.hub-module-preview strong {
    display:
        block;

    margin-top:
        3px;

    color:
        #eaffff;

    font-size:
        9px;

    letter-spacing:
        1.5px;
}


.hub-module-preview p {
    margin:
        4px auto;

    max-width:
        360px;

    color:
        #63878e;

    font-size:
        6px;

    line-height:
        1.45;

    letter-spacing:
        .5px;
}


.hub-module-preview > span {
    color:
        var(--yellow);

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        1px;
}


/* =========================================================
   47. LOWER INTERFACE
   ========================================================= */

.hub-lower-interface {
    position:
        absolute;

    z-index:
        20;

    left:
        24px;

    right:
        24px;

    bottom:
        12px;

    display:
        grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items:
        end;

    pointer-events:
        none;
}


.hub-lower-interface > div {
    display:
        flex;

    flex-direction:
        column;
}


.hub-lower-interface > div:last-child {
    align-items:
        flex-end;
}


.hub-lower-interface small {
    color:
        #41636a;

    font-size:
        5px;

    letter-spacing:
        1px;
}


.hub-lower-interface strong {
    margin-top:
        2px;

    color:
        #80abb2;

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.hub-lower-center {
    flex-direction:
        row !important;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(0, 240, 255, .32);

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        1.4px;
}


.hub-lower-center span {
    width:
        50px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 240, 255, .32)
        );
}


.hub-lower-center span:last-child {
    transform:
        scaleX(-1);
}


/* =========================================================
   49. INTERACTION STATES
   ========================================================= */

.hub-screen.module-hover
.hub-core {
    filter:
        brightness(1.22);

    transform:
        translate(-50%, -50%)
        scale(1.025);
}


.hub-screen.module-holomap
.hub-core-orbit-a,

.hub-screen.module-holomap
.hub-core-orbit-c {
    border-color:
        rgba(247, 255, 0, .42);

    border-top-color:
        var(--yellow);
}


.hub-screen.module-character
.hub-core-orbit-a {
    border-color:
        rgba(0, 240, 255, .48);
}


.hub-screen.module-database
.hub-core-orbit-b {
    border-color:
        rgba(255, 43, 214, .45);
}


.hub-screen.module-network
.hub-core-center {
    box-shadow:
        inset 0 0 35px
        rgba(0, 240, 255, .14),
        0 0 35px
        rgba(0, 240, 255, .12);
}


/* ADMIN ACTIVE STATE */

.hub-screen.module-admin
.hub-core-orbit-b {
    border-color:
        rgba(255, 49, 85, .58);

    border-left-color:
        var(--red);

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 49, 85, .35)
        );
}


.hub-screen.module-admin
.hub-core-center {
    box-shadow:
        inset 0 0 35px
        rgba(255, 49, 85, .07),
        0 0 32px
        rgba(255, 49, 85, .08);
}


/* =========================================================
   51. HUB ANIMATIONS
   ========================================================= */

@keyframes hubSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes hubSpinReverse {

    from {
        transform:
            rotate(360deg);
    }

    to {
        transform:
            rotate(0deg);
    }

}


@keyframes hubCoreGlow {

    0%,
    100% {
        opacity:
            .60;

        transform:
            scale(.96);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1.05);
    }

}


@keyframes hubUserPulse {

    0%,
    100% {
        box-shadow:
            inset 0 0 22px
            rgba(0, 240, 255, .06),
            0 0 14px
            rgba(0, 240, 255, .05);
    }

    50% {
        box-shadow:
            inset 0 0 28px
            rgba(0, 240, 255, .12),
            0 0 25px
            rgba(0, 240, 255, .12);
    }

}


@keyframes hubDataTravel {

    from {
        left:
            0%;

        opacity:
            0;
    }

    12% {
        opacity:
            1;
    }

    88% {
        opacity:
            1;
    }

    to {
        left:
            calc(100% - 28px);

        opacity:
            0;
    }

}


@keyframes hubEqualizer {

    0%,
    100% {
        transform:
            scaleY(.45);

        opacity:
            .45;
    }

    50% {
        transform:
            scaleY(1);

        opacity:
            1;
    }

}


@keyframes hubScan {

    from {
        transform:
            translateY(-150%);
    }

    to {
        transform:
            translateY(1450%);
    }

}


@keyframes hubAtmosphere {

    0%,
    100% {
        opacity:
            .55;

        transform:
            translateX(-50%)
            scale(.96);
    }

    50% {
        opacity:
            1;

        transform:
            translateX(-50%)
            scale(1.04);
    }

}


@keyframes hubTerminalIn {

    from {
        opacity:
            0;

        transform:
            translateY(12px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes hubNetworkIn {

    from {
        opacity:
            0;

        transform:
            scale(.98);
    }

    to {
        opacity:
            1;

        transform:
            scale(1);
    }

}


/* =========================================================
   52. HUB RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .hub-screen {
        grid-template-columns:
            205px
            minmax(470px, 1fr)
            205px;

        gap:
            10px;

        padding-left:
            14px;

        padding-right:
            14px;
    }


    .hub-node {
        min-width:
            155px;

        padding:
            8px 9px;
    }


    .hub-node-copy span {
        display:
            none;
    }


    .hub-node-left {
        left:
            0;
    }


    .hub-node-right {
        right:
            0;
    }


    .hub-node-admin {
        right:
            2%;

        bottom:
            10%;
    }

}


@media (max-width: 950px) {

    .hub-screen {
        grid-template-columns:
            1fr;

        padding:
            12px 12px 46px;
    }


    .hub-terminal {
        display:
            none;
    }


    .hub-network {
        width:
            100%;

        height:
            100%;
    }


    .hub-node-left {
        left:
            5%;
    }


    .hub-node-right {
        right:
            5%;
    }


    .hub-node-admin {
        right:
            5%;

        bottom:
            8%;
    }


    .hub-module-preview {
        width:
            min(420px, 78%);
    }

}


@media (max-width: 650px) {

    .hub-core {
        width:
            175px;
    }


    .hub-node {
        min-width:
            118px;

        padding:
            7px;
    }


    .hub-node-icon {
        flex-basis:
            29px;

        width:
            29px;

        height:
            29px;

        font-size:
            14px;
    }


    .hub-node-copy small,
    .hub-node-copy span {
        display:
            none;
    }


    .hub-node-copy strong {
        font-size:
            8px;
    }


    .hub-node-left {
        left:
            1%;
    }


    .hub-node-right {
        right:
            1%;
    }


    .hub-node-admin {
        right:
            1%;

        bottom:
            7%;

        min-width:
            118px;
    }


    .hub-network-title strong {
        font-size:
            14px;
    }


    .hub-lower-center {
        display:
            none;
    }


    .hub-lower-interface {
        grid-template-columns:
            1fr 1fr;
    }

}
/* =========================================================
   53. HUB V2 // PROGRESSION TERMINAL
   ========================================================= */

.hub-terminal-left .hub-user-symbol {
    height:
        88px;
}


.hub-identity-hidden-alias {
    display:
        none !important;
}


.hub-progress-identity-name {
    margin-top:
        7px;

    color:
        #eaffff;

    font-size:
        13px;

    font-weight:
        900;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    text-shadow:
        0 0 11px
        rgba(0, 240, 255, .12);
}


.hub-progression-header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        9px;
}


.hub-progression-header > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.hub-progression-header small {
    color:
        #496f76;

    font-size:
        5px;

    letter-spacing:
        1.3px;
}


.hub-progression-header strong {
    color:
        #bfe9ed;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.hub-progression-header > span {
    color:
        var(--cyan);

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        .8px;

    text-align:
        right;
}


.hub-progress-data {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;
}


.hub-progress-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    min-height:
        24px;

    padding:
        0 1px 6px;

    border-bottom:
        1px solid
        rgba(0, 240, 255, .055);
}


.hub-progress-row > span {
    color:
        #5a8188;

    font-size:
        6px;

    letter-spacing:
        1px;
}


.hub-progress-row > strong {
    color:
        #dfffff;

    font-family:
        Consolas,
        monospace;

    font-size:
        8px;

    letter-spacing:
        .6px;

    text-align:
        right;
}


.hub-progress-row:first-child > strong,
.hub-progress-row:nth-child(4) > strong,
.hub-progress-row:nth-child(5) > strong {
    color:
        var(--yellow);

    text-shadow:
        0 0 7px
        rgba(247, 255, 0, .18);
}


.hub-progress-row-muted > strong {
    color:
        #6e7854;
}


.hub-level-track {
    position:
        relative;

    width:
        100%;

    height:
        5px;

    margin-top:
        10px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 240, 255, .11);

    background:
        repeating-linear-gradient(
            90deg,
            rgba(0, 240, 255, .03) 0,
            rgba(0, 240, 255, .03) calc(10% - 1px),
            rgba(1, 6, 9, .95) calc(10% - 1px),
            rgba(1, 6, 9, .95) 10%
        );
}


.hub-level-track i {
    position:
        absolute;

    inset:
        0 auto 0 0;

    width:
        0%;

    background:
        linear-gradient(
            90deg,
            rgba(0, 169, 199, .75),
            var(--cyan)
        );

    box-shadow:
        0 0 8px
        rgba(0, 240, 255, .28);

    transition:
        width .3s ease;
}


.hub-level-caption {
    margin-top:
        5px;

    color:
        #36565c;

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        .8px;

    text-align:
        right;
}


.hub-terminal-left .hub-mini-action {
    margin-top:
        8px;
}


.hub-presence-action {
    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        7px;

    border-color:
        rgba(97, 255, 155, .22);

    color:
        #7fbca0;

    background:
        rgba(97, 255, 155, .025);
}


.hub-presence-action > span {
    color:
        #61ff9b;

    font-size:
        7px;

    text-shadow:
        0 0 8px
        rgba(97, 255, 155, .65);
}


.hub-presence-action > b {
    min-width:
        22px;

    color:
        #61ff9b;

    font-family:
        Consolas,
        monospace;

    font-size:
        7px;

    text-align:
        right;
}


.hub-presence-action:hover {
    border-color:
        #61ff9b;

    color:
        #dffff0;

    background:
        rgba(97, 255, 155, .07);

    box-shadow:
        inset 0 0 20px
        rgba(97, 255, 155, .035),
        0 0 12px
        rgba(97, 255, 155, .06);
}


/* =========================================================
   54. HUB V2 // ONLINE PRESENTI OVERLAY
   ========================================================= */

body.hub-presence-open {
    overflow:
        hidden !important;
}


.hub-presence-overlay {
    position:
        fixed;

    z-index:
        500;

    top:
        var(--header-height);

    right:
        0;

    bottom:
        var(--footer-height);

    left:
        0;

    display:
        none;

    place-items:
        center;

    padding:
        28px;
}


.hub-presence-overlay.is-open {
    display:
        grid;
}


.hub-presence-backdrop {
    position:
        absolute;

    inset:
        0;

    border:
        0;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(0, 240, 255, .055),
            transparent 35%
        ),
        rgba(0, 3, 6, .88);

    backdrop-filter:
        blur(5px);

    cursor:
        default;
}


.hub-presence-shell {
    position:
        relative;

    z-index:
        2;

    width:
        min(920px, 94vw);

    height:
        min(640px, calc(100vh - var(--header-height) - var(--footer-height) - 56px));

    display:
        grid;

    grid-template-rows:
        68px
        38px
        minmax(0, 1fr)
        28px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 240, 255, .28);

    border-left:
        2px solid
        var(--cyan);

    background:
        linear-gradient(
            180deg,
            rgba(4, 14, 20, .99),
            rgba(1, 6, 9, .99)
        );

    box-shadow:
        0 28px 90px
        rgba(0, 0, 0, .72),
        0 0 28px
        rgba(0, 240, 255, .07);

    clip-path:
        polygon(
            0 0,
            calc(100% - 20px) 0,
            100% 20px,
            100% 100%,
            18px 100%,
            0 calc(100% - 18px)
        );
}


.hub-presence-shell::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    pointer-events:
        none;

    opacity:
        .46;

    background-image:
        linear-gradient(
            rgba(0, 240, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .025) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;
}


.hub-presence-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        11px 16px 10px 18px;

    border-bottom:
        1px solid
        rgba(0, 240, 255, .14);

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .055),
            transparent 64%,
            rgba(255, 43, 214, .025)
        );
}


.hub-presence-header > div:first-child {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.hub-presence-header small {
    color:
        #4d747b;

    font-size:
        5px;

    letter-spacing:
        1.6px;
}


.hub-presence-header strong {
    color:
        #eaffff;

    font-size:
        15px;

    letter-spacing:
        1.7px;
}


.hub-presence-header span {
    color:
        var(--cyan);

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        1px;
}


.hub-presence-header-actions {
    display:
        flex;

    gap:
        7px;
}


.hub-presence-header-actions button {
    min-width:
        92px;

    height:
        31px;

    border:
        1px solid
        rgba(0, 240, 255, .17);

    background:
        rgba(0, 240, 255, .025);

    color:
        #648e95;

    cursor:
        pointer;

    font-family:
        Consolas,
        monospace;

    font-size:
        6px;

    font-weight:
        800;

    letter-spacing:
        .9px;
}


.hub-presence-header-actions button:hover {
    border-color:
        var(--cyan);

    color:
        #dfffff;
}


.hub-presence-header-actions .hub-presence-close {
    border-color:
        rgba(255, 49, 85, .22);

    color:
        #aa6874;
}


.hub-presence-header-actions .hub-presence-close:hover {
    border-color:
        var(--red);

    color:
        #ff8298;
}


.hub-presence-refresh:disabled {
    opacity:
        .35;

    cursor:
        wait;
}


.hub-presence-toolbar {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        0 18px;

    border-bottom:
        1px solid
        rgba(0, 240, 255, .08);

    color:
        #466b72;

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        1px;
}


.hub-presence-toolbar strong {
    color:
        #61ff9b;

    font-size:
        6px;
}


.hub-presence-list {
    min-height:
        0;

    overflow-x:
        hidden;

    overflow-y:
        auto;

    padding:
        14px 16px 24px;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(0, 240, 255, .45)
        rgba(0, 240, 255, .02);
}


.hub-presence-empty {
    min-height:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    color:
        #60868d;

    font-family:
        Consolas,
        monospace;

    font-size:
        8px;

    letter-spacing:
        1.3px;

    text-align:
        center;
}


.hub-presence-empty small {
    color:
        #395a60;

    font-size:
        5px;
}


.hub-presence-empty.is-error {
    color:
        #c27c88;
}


.hub-presence-district {
    margin-bottom:
        17px;

    border:
        1px solid
        rgba(0, 240, 255, .10);

    background:
        rgba(0, 240, 255, .014);
}


.hub-presence-district > header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    min-height:
        52px;

    padding:
        9px 13px;

    border-bottom:
        1px solid
        rgba(0, 240, 255, .11);

    border-left:
        2px solid
        var(--cyan);

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .06),
            transparent
        );
}


.hub-presence-district > header > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.hub-presence-district > header small {
    color:
        #486d74;

    font-size:
        5px;

    letter-spacing:
        1.3px;
}


.hub-presence-district > header strong {
    color:
        #dfffff;

    font-size:
        11px;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.hub-presence-district > header > span {
    color:
        var(--cyan);

    font-family:
        Consolas,
        monospace;

    font-size:
        6px;

    letter-spacing:
        1px;
}


.hub-presence-location {
    padding:
        11px 13px 13px 24px;
}


.hub-presence-location + .hub-presence-location {
    border-top:
        1px solid
        rgba(0, 240, 255, .055);
}


.hub-presence-location-title {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-bottom:
        8px;

    color:
        #638990;
}


.hub-presence-location-title > span {
    color:
        var(--yellow);

    font-size:
        9px;
}


.hub-presence-location-title > strong {
    color:
        #86adb3;

    font-size:
        7px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.hub-presence-location-title > small {
    margin-left:
        auto;

    color:
        #466970;

    font-family:
        Consolas,
        monospace;

    font-size:
        6px;
}


.hub-presence-characters {
    display:
        grid;

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

    gap:
        7px;
}


.hub-presence-character {
    position:
        relative;

    min-height:
        50px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto auto;

    align-items:
        center;

    gap:
        9px;

    padding:
        8px 10px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 240, 255, .09);

    background:
        rgba(0, 0, 0, .15);

    color:
        inherit;

    cursor:
        pointer;

    text-align:
        left;

    transition:
        .16s ease;
}


.hub-presence-character:hover {
    border-color:
        rgba(0, 240, 255, .44);

    background:
        rgba(0, 240, 255, .055);

    transform:
        translateY(-1px);
}


.hub-presence-character-signal {
    color:
        #61ff9b;

    font-size:
        7px;

    text-shadow:
        0 0 7px
        rgba(97, 255, 155, .55);
}


.hub-presence-character-copy {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.hub-presence-character-copy strong {
    overflow:
        hidden;

    color:
        #dfffff;

    font-size:
        8px;

    letter-spacing:
        .8px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.hub-presence-character-copy small {
    color:
        #4e7279;

    font-size:
        5px;

    letter-spacing:
        .8px;
}


.hub-presence-character > em {
    padding:
        3px 5px;

    border:
        1px solid
        rgba(247, 255, 0, .22);

    color:
        var(--yellow);

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    font-style:
        normal;

    letter-spacing:
        .7px;
}


.hub-presence-character > b {
    color:
        #557a81;

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    font-weight:
        700;

    white-space:
        nowrap;
}


.hub-presence-character:hover > b {
    color:
        var(--cyan);
}


.hub-presence-footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        0 13px;

    border-top:
        1px solid
        rgba(0, 240, 255, .08);

    color:
        #36585f;

    font-family:
        Consolas,
        monospace;

    font-size:
        5px;

    letter-spacing:
        .9px;
}


/* =========================================================
   55. HUB V2 // RESPONSIVE ADDITIONS
   ========================================================= */

@media (max-width: 800px) {

    .hub-presence-overlay {
        padding:
            12px;
    }


    .hub-presence-shell {
        width:
            100%;

        height:
            calc(100vh - var(--header-height) - var(--footer-height) - 24px);
    }


    .hub-presence-characters {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 560px) {

    .hub-presence-header {
        padding:
            9px 10px;
    }


    .hub-presence-header small,
    .hub-presence-header span {
        display:
            none;
    }


    .hub-presence-header strong {
        font-size:
            12px;
    }


    .hub-presence-header-actions button {
        min-width:
            72px;

        padding:
            0 6px;
    }


    .hub-presence-toolbar > span {
        display:
            none;
    }


    .hub-presence-toolbar {
        justify-content:
            flex-end;
    }


    .hub-presence-character {
        grid-template-columns:
            auto 1fr auto;
    }


    .hub-presence-character > b {
        display:
            none;
    }

}


/* =========================================================
   HUB NODE LEGIBILITY PATCH
   ========================================================= */

.hub-node {
    min-width: 194px;
    padding: 11px 13px;
    gap: 11px;
}

.hub-node-copy {
    gap: 2px;
}

.hub-node-copy small {
    font-size: 6.2px;
    line-height: 1.25;
    letter-spacing: 1.25px;
}

.hub-node-copy strong {
    margin: 1px 0;
    font-size: 11px;
    line-height: 1.12;
}

.hub-node-copy span {
    font-size: 6.4px;
    line-height: 1.35;
    letter-spacing: .58px;
}

@media (max-width: 1200px) {

    .hub-node {
        min-width: 168px;
    }

}
/* =========================================================
   HUB MODULE PREVIEW — POSITION + LEGIBILITY HOTFIX
   ========================================================= */

.hub-module-preview {
    bottom: 1.4%;
    padding: 11px 16px;
}

.hub-module-preview small {
    font-size: 6.5px;
    line-height: 1.35;
    letter-spacing: 2px;
}

.hub-module-preview strong {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 1.6px;
}

.hub-module-preview p {
    margin: 7px auto;
    max-width: 390px;
    font-size: 7.5px;
    line-height: 1.6;
    letter-spacing: .55px;
}

.hub-module-preview > span {
    display: block;
    margin-top: 6px;
    font-size: 6.5px;
    line-height: 1.3;
    letter-spacing: 1.2px;
}

/* =========================================================
   HUB // CITY SERVICES NODE
   Mirrors the GESTIONE node.
   ========================================================= */

.hub-node-services {
    left: 3%;
    bottom: 15%;
    min-width: 175px;
    border-color: rgba(0, 240, 255, .20);
    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .055),
            rgba(2, 8, 12, .76)
        );
}

.hub-node-services .hub-node-icon {
    border-color: rgba(0, 240, 255, .32);
    color: var(--cyan);
    text-shadow:
        0 0 9px rgba(0, 240, 255, .55);
}

.hub-node-services:hover,
.hub-node-services:focus {
    border-color: var(--cyan);
    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .15),
            rgba(2, 10, 15, .86)
        );
    box-shadow:
        inset 0 0 24px rgba(0, 240, 255, .05),
        0 0 18px rgba(0, 240, 255, .10);
    transform:
        translateY(-2px);
}

.hub-node-services:hover .hub-node-icon,
.hub-node-services:focus .hub-node-icon {
    color: #a9fbff;
}

.hub-screen.module-services .hub-core-orbit-a {
    border-color: rgba(0, 240, 255, .52);
}

@media (max-width: 1200px) {

    .hub-node-services {
        left: 2%;
        bottom: 10%;
    }

}

@media (max-width: 950px) {

    .hub-node-services {
        left: 5%;
        bottom: 8%;
    }

}

@media (max-width: 650px) {

    .hub-node-services {
        left: 1%;
        bottom: 7%;
        min-width: 118px;
    }

}

/* =========================================================
   HUB HOVER PREVIEW // CLEARANCE HOTFIX
   ========================================================= */

.hub-module-preview {
    z-index: 19;
    bottom: 1.2%;
}

@media (max-height: 760px) {

    .hub-node-bottom {
        bottom: 23%;
    }

    .hub-module-preview {
        padding-top: 8px;
        padding-bottom: 8px;
    }

}


/* =========================================================
   HUB // DATANET QUICK ACTIONS
   ========================================================= */

.hub-datanet-actions {
    display: grid;
    gap: 8px;

    margin: 18px 15px 0;
}

.hub-datanet-button {
    width: 100%;
    min-width: 0;

    padding: 12px 13px;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;

    text-align: left;

    border:
        1px solid rgba(0, 240, 255, .20);

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .055),
            rgba(2, 8, 12, .75)
        );

    color: #9ccbd2;
    cursor: pointer;
}

.hub-datanet-button > span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(0, 240, 255, .25);

    color: var(--cyan);
}

.hub-datanet-button small,
.hub-datanet-button strong {
    display: block;
}

.hub-datanet-button small {
    color:
        rgba(130, 190, 200, .58);

    font-size: 6px;
    letter-spacing: 1.2px;
}

.hub-datanet-button strong {
    margin-top: 3px;

    font-size: 8px;
    letter-spacing: 1px;
}

.hub-datanet-button > b {
    color: var(--yellow);

    font-family: monospace;
    font-size: 8px;
}

.hub-datanet-button:hover,
.hub-datanet-button:focus,
.hub-messages-button.has-unread {
    border-color:
        rgba(234, 255, 0, .55);

    color: #eaffff;

    outline: none;
}

.hub-boards-button {
    border-color:
        rgba(0, 240, 255, .14);

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .035),
            rgba(2, 8, 12, .68)
        );
}

.hub-boards-button:hover,
.hub-boards-button:focus {
    border-color: var(--cyan);
}



/* =========================================================
   HUB // DATANET STACK — SERVICES + MANAGEMENT
   Services and Management now live inside the right-side
   Datanet terminal, directly below SMS and Boards.
   ========================================================= */

.hub-services-button {
    border-color:
        rgba(0, 240, 255, .14);

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, .035),
            rgba(2, 8, 12, .68)
        );
}

.hub-services-button:hover,
.hub-services-button:focus {
    border-color:
        var(--cyan);
}

.hub-admin-button {
    border-color:
        rgba(255, 49, 85, .22);

    background:
        linear-gradient(
            90deg,
            rgba(255, 49, 85, .055),
            rgba(2, 8, 12, .72)
        );
}

.hub-admin-button > span {
    border-color:
        rgba(255, 49, 85, .32);

    color:
        var(--red);

    text-shadow:
        0 0 9px
        rgba(255, 49, 85, .45);
}

.hub-admin-button:hover,
.hub-admin-button:focus {
    border-color:
        var(--red);

    background:
        linear-gradient(
            90deg,
            rgba(255, 49, 85, .13),
            rgba(2, 8, 12, .80)
        );

    color:
        #eaffff;
}

.hub-admin-button:hover > span,
.hub-admin-button:focus > span {
    color:
        #ff8298;
}

.hub-admin-button > b {
    color:
        #ff6d86;
}

.hub-datanet-actions [hidden] {
    display:
        none !important;
}

/* =========================================================
   HUB // RIGHT DATANET TERMINAL VIEWPORT HOTFIX
   The expanded action stack can exceed the usable viewport
   height on Firefox. Keep the page fixed and scroll only the
   right terminal when required.
   ========================================================= */

.hub-terminal-right {
    align-self: stretch;
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(0, 240, 255, .55)
        rgba(0, 240, 255, .05);
}

.hub-terminal-right::-webkit-scrollbar {
    width: 5px;
}

.hub-terminal-right::-webkit-scrollbar-track {
    background:
        rgba(0, 240, 255, .04);
}

.hub-terminal-right::-webkit-scrollbar-thumb {
    background:
        rgba(0, 240, 255, .48);
}

@media (max-height: 860px) and (min-width: 951px) {

    .hub-terminal-right {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .hub-terminal-right .hub-terminal-line {
        margin-top: 11px;
        margin-bottom: 11px;
    }

    .hub-terminal-right .hub-datanet-actions {
        margin-top: 12px;
        gap: 6px;
    }

    .hub-terminal-right .hub-datanet-button {
        padding-top: 9px;
        padding-bottom: 9px;
    }

}


/* =========================================================
   NCCP 2045 // DYNAMIC CENTRAL HUB BACKGROUND
   Uploaded media stays below procedural skyline and FX.
   ========================================================= */

.hub-background {
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 4, 7, .26),
            rgba(0, 3, 5, .72)
        ),
        var(--nc-hub-bg-image, none);

    background-size:
        cover,
        cover;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat;
}


/* =========================================================
   HUB // MANAGEMENT RESTORED TO ORIGINAL CENTRAL NODE
   ========================================================= */

.hub-node-admin[href] {
    text-decoration: none;
}


/* =========================================================
   HUB // LEFT TERMINAL VIEWPORT GUARD
   Prevents the personal terminal from crossing the Hub frame
   on short Firefox/Chromium viewports.
   ========================================================= */

.hub-terminal-left {
    min-height: 0;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(0, 240, 255, .45)
        rgba(0, 240, 255, .035);
}

.hub-terminal-left::-webkit-scrollbar {
    width: 4px;
}

.hub-terminal-left::-webkit-scrollbar-track {
    background: rgba(0, 240, 255, .03);
}

.hub-terminal-left::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, .42);
}

/* =========================================================
   HUB // LEFT TERMINAL HARD FRAME LOCK
   Match the right terminal behaviour: never cross the Hub
   viewport frame, even on short-height screens.
   ========================================================= */

.hub-terminal-left {
    align-self: stretch;
    height: 100%;
    box-sizing: border-box;
}