:root {
    --bg:
        #05060a;

    --bg-soft:
        #090b12;

    --panel:
        rgba(
            15,
            18,
            28,
            0.84
        );

    --panel-strong:
        rgba(
            13,
            16,
            25,
            0.96
        );

    --panel-line:
        rgba(
            255,
            255,
            255,
            0.08
        );

    --text:
        #f5f7ff;

    --muted:
        #8f96aa;

    --cyan:
        #28e7ff;

    --purple:
        #9b6cff;

    --pink:
        #ff4fd8;

    --green:
        #3eff9a;

    --red:
        #ff536f;

    --amber:
        #ffc95a;

    --shadow:
        0 20px 60px rgba(
            0,
            0,
            0,
            0.36
        );

    --radius:
        22px;

    --radius-small:
        14px;

    --nav-width:
        250px;

    --header-height:
        78px;
}


* {
    box-sizing:
        border-box;
}


html {
    color-scheme:
        dark;
}


body {
    margin:
        0;

    min-width:
        1280px;

    min-height:
        100vh;

    overflow:
        hidden;

    font-family:
        "Inter",
        system-ui,
        sans-serif;

    color:
        var(
            --text
        );

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(
                40,
                231,
                255,
                0.09
            ),
            transparent 34%
        ),
        radial-gradient(
            circle at 95% 12%,
            rgba(
                155,
                108,
                255,
                0.13
            ),
            transparent 28%
        ),
        linear-gradient(
            160deg,
            #030408 0%,
            #070913 50%,
            #04050a 100%
        );
}


button,
input,
textarea,
select {
    font:
        inherit;
}


button {
    color:
        inherit;

    cursor:
        pointer;
}


button,
textarea,
select {
    outline:
        none;
}


.ambient {
    position:
        fixed;

    z-index:
        0;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    filter:
        blur(
            90px
        );

    pointer-events:
        none;

    opacity:
        0.3;

    animation:
        ambientFloat
        14s
        ease-in-out
        infinite alternate;
}


.ambient-one {
    top:
        -150px;

    left:
        300px;

    background:
        rgba(
            40,
            231,
            255,
            0.2
        );
}


.ambient-two {
    right:
        -180px;

    bottom:
        -160px;

    background:
        rgba(
            155,
            108,
            255,
            0.2
        );

    animation-delay:
        -7s;
}


.soc-app {
    position:
        relative;

    z-index:
        1;

    display:
        grid;

    grid-template-columns:
        var(
            --nav-width
        )
        1fr;

    grid-template-rows:
        var(
            --header-height
        )
        1fr;

    width:
        100vw;

    height:
        100vh;
}


.command-bar {
    grid-column:
        1 / -1;

    display:
        grid;

    grid-template-columns:
        var(
            --nav-width
        )
        1fr
        auto;

    align-items:
        center;

    min-height:
        var(
            --header-height
        );

    padding:
        0 18px;

    border-bottom:
        1px solid
        var(
            --panel-line
        );

    background:
        rgba(
            5,
            6,
            10,
            0.72
        );

    backdrop-filter:
        blur(
            28px
        );
}


.soc-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        inherit;

    text-decoration:
        none;
}


.brand-core {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        62px;

    height:
        44px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            40,
            231,
            255,
            0.35
        );

    border-radius:
        14px;

    color:
        var(
            --cyan
        );

    background:
        linear-gradient(
            135deg,
            rgba(
                40,
                231,
                255,
                0.13
            ),
            rgba(
                155,
                108,
                255,
                0.09
            )
        );

    box-shadow:
        inset 0 0 26px
        rgba(
            40,
            231,
            255,
            0.08
        );

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.brand-pulse {
    position:
        absolute;

    inset:
        auto
        0
        0;

    height:
        2px;

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

    animation:
        scanLine
        2s
        linear
        infinite;
}


.brand-copy {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.brand-copy strong {
    font-size:
        0.82rem;

    letter-spacing:
        0.14em;
}


.brand-copy small {
    color:
        var(
            --muted
        );

    font-size:
        0.65rem;

    letter-spacing:
        0.12em;
}


.system-ribbon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    overflow:
        hidden;
}


.health-node {
    display:
        grid;

    grid-template-columns:
        auto
        auto
        auto;

    align-items:
        center;

    gap:
        7px;

    min-width:
        104px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.health-node i {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #6d7282;

    box-shadow:
        0 0 0 4px
        rgba(
            109,
            114,
            130,
            0.08
        );
}


.health-node span {
    color:
        var(
            --muted
        );

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.health-node strong {
    font-size:
        0.68rem;

    text-transform:
        uppercase;
}


.health-node.online i {
    background:
        var(
            --green
        );

    box-shadow:
        0 0 0 4px
        rgba(
            62,
            255,
            154,
            0.09
        ),
        0 0 16px
        rgba(
            62,
            255,
            154,
            0.7
        );
}


.health-node.error i {
    background:
        var(
            --red
        );

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            83,
            111,
            0.08
        ),
        0 0 16px
        rgba(
            255,
            83,
            111,
            0.7
        );
}


.command-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;
}


.icon-button,
.alert-button,
.moderator-button,
.refresh-button,
.panel-action {
    border:
        1px solid
        var(
            --panel-line
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    transition:
        160ms
        ease;
}


.icon-button:hover,
.alert-button:hover,
.moderator-button:hover,
.refresh-button:hover,
.panel-action:hover {
    border-color:
        rgba(
            40,
            231,
            255,
            0.28
        );

    background:
        rgba(
            40,
            231,
            255,
            0.08
        );
}


.icon-button {
    width:
        42px;

    height:
        42px;

    border-radius:
        13px;

    font-size:
        1rem;
}


.alert-button {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    height:
        42px;

    padding:
        0 12px;

    border-radius:
        13px;
}


.alert-symbol {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        21px;

    height:
        21px;

    border-radius:
        8px;

    color:
        white;

    background:
        var(
            --red
        );

    font-size:
        0.72rem;

    font-weight:
        900;

    box-shadow:
        0 0 16px
        rgba(
            255,
            83,
            111,
            0.45
        );
}


.alert-button span:nth-child(2) {
    color:
        var(
            --muted
        );

    font-size:
        0.72rem;

    font-weight:
        700;
}


.alert-button strong {
    font-size:
        0.78rem;
}


.moderator-control {
    position:
        relative;
}


.moderator-button {
    display:
        grid;

    grid-template-columns:
        34px
        auto
        9px;

    align-items:
        center;

    gap:
        9px;

    min-width:
        180px;

    height:
        48px;

    padding:
        5px 10px;

    border-radius:
        15px;
}


.moderator-avatar {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            155,
            108,
            255,
            0.5
        );

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            rgba(
                155,
                108,
                255,
                0.28
            ),
            rgba(
                40,
                231,
                255,
                0.15
            )
        );

    font-weight:
        900;
}


.moderator-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.moderator-copy {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    min-width:
        0;
}


.moderator-copy strong,
.moderator-copy small {
    max-width:
        110px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.moderator-copy strong {
    font-size:
        0.78rem;
}


.moderator-copy small {
    margin-top:
        2px;

    color:
        var(
            --muted
        );

    font-size:
        0.63rem;
}


.moderator-presence {
    width:
        9px;

    height:
        9px;

    border-radius:
        50%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 14px
        rgba(
            62,
            255,
            154,
            0.8
        );
}


.moderator-menu {
    position:
        absolute;

    z-index:
        20;

    top:
        calc(
            100% +
            8px
        );

    right:
        0;

    display:
        grid;

    gap:
        5px;

    width:
        190px;

    padding:
        10px;

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

    border-radius:
        16px;

    background:
        rgba(
            10,
            12,
            19,
            0.98
        );

    box-shadow:
        var(
            --shadow
        );
}


.moderator-menu[hidden] {
    display:
        none;
}


.moderator-menu button {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px;

    border:
        0;

    border-radius:
        11px;

    background:
        transparent;

    text-align:
        left;
}


.moderator-menu button:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.05
        );
}


.moderator-menu i {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;
}


.status-green {
    background:
        var(
            --green
        );
}


.status-yellow {
    background:
        var(
            --amber
        );
}


.status-purple {
    background:
        var(
            --purple
        );
}


.status-gray {
    background:
        #74798a;
}


.moderator-menu hr {
    width:
        100%;

    border:
        0;

    border-top:
        1px solid
        var(
            --panel-line
        );
}


.danger-menu-item {
    color:
        var(
            --red
        );
}


.mission-nav {
    grid-row:
        2;

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        14px;

    min-height:
        0;

    padding:
        18px
        14px;

    overflow-y:
        auto;

    border-right:
        1px solid
        var(
            --panel-line
        );

    background:
        rgba(
            6,
            7,
            12,
            0.66
        );

    backdrop-filter:
        blur(
            22px
        );
}


.nav-section {
    display:
        grid;

    gap:
        5px;
}


.nav-label {
    padding:
        0 10px
        5px;

    color:
        #61677a;

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;
}


.nav-item {
    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        0 11px;

    border:
        1px solid
        transparent;

    border-radius:
        12px;

    color:
        #a2a8ba;

    background:
        transparent;

    text-align:
        left;

    transition:
        160ms
        ease;
}


.nav-item:hover {
    color:
        white;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );
}


.nav-item.active {
    color:
        white;

    border-color:
        rgba(
            40,
            231,
            255,
            0.16
        );

    background:
        linear-gradient(
            90deg,
            rgba(
                40,
                231,
                255,
                0.12
            ),
            rgba(
                155,
                108,
                255,
                0.06
            )
        );

    box-shadow:
        inset 3px 0
        var(
            --cyan
        );
}


.nav-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        24px;

    height:
        24px;

    border-radius:
        8px;

    color:
        var(
            --cyan
        );

    background:
        rgba(
            40,
            231,
            255,
            0.06
        );

    font-size:
        0.78rem;
}


.nav-counter {
    min-width:
        24px;

    padding:
        3px 6px;

    border-radius:
        999px;

    color:
        var(
            --cyan
        );

    background:
        rgba(
            40,
            231,
            255,
            0.09
        );

    font-size:
        0.63rem;

    text-align:
        center;
}


.nav-counter.warning {
    color:
        var(
            --amber
        );

    background:
        rgba(
            255,
            201,
            90,
            0.09
        );
}


.nav-counter.danger {
    color:
        var(
            --red
        );

    background:
        rgba(
            255,
            83,
            111,
            0.09
        );
}


.nav-live {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 12px
        rgba(
            62,
            255,
            154,
            0.7
        );

    animation:
        livePulse
        1.7s
        infinite;
}


.staff-nav {
    overflow:
        hidden;

    color:
        #d7c9ff;

    background:
        linear-gradient(
            90deg,
            rgba(
                155,
                108,
                255,
                0.09
            ),
            rgba(
                255,
                79,
                216,
                0.05
            )
        );
}


.staff-glow {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(
            --pink
        );

    box-shadow:
        0 0 16px
        rgba(
            255,
            79,
            216,
            0.8
        );
}


.nav-footer-card {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        34px
        1fr;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        auto;

    padding:
        13px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            155,
            108,
            255,
            0.14
        );

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(
                155,
                108,
                255,
                0.08
            ),
            rgba(
                40,
                231,
                255,
                0.04
            )
        );
}


.footer-orbit {
    width:
        30px;

    height:
        30px;

    border:
        2px solid
        rgba(
            155,
            108,
            255,
            0.3
        );

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

    border-radius:
        50%;

    animation:
        spin
        2.5s
        linear
        infinite;
}


.nav-footer-card strong {
    display:
        block;

    font-size:
        0.69rem;
}


.nav-footer-card small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(
            --muted
        );

    font-size:
        0.6rem;

    line-height:
        1.4;
}


.mission-main {
    grid-column:
        2;

    grid-row:
        2;

    min-width:
        0;

    min-height:
        0;

    padding:
        18px
        20px
        24px;

    overflow:
        auto;
}


.mission-view {
    display:
        none;
}


.mission-view.active {
    display:
        block;
}


.view-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        16px;
}


.eyebrow,
.panel-kicker {
    color:
        var(
            --cyan
        );

    font-size:
        0.62rem;

    font-weight:
        900;

    letter-spacing:
        0.16em;
}


.panel-kicker.danger {
    color:
        var(
            --red
        );
}


.panel-kicker.staff {
    color:
        var(
            --pink
        );
}


.view-heading h1 {
    margin:
        5px 0
        4px;

    font-size:
        clamp(
            1.55rem,
            2vw,
            2.2rem
        );

    line-height:
        1.05;

    letter-spacing:
        -0.04em;
}


.heading-spark {
    color:
        var(
            --purple
        );

    text-shadow:
        0 0 18px
        rgba(
            155,
            108,
            255,
            0.7
        );
}


.view-heading p {
    margin:
        0;

    color:
        var(
            --muted
        );

    font-size:
        0.78rem;
}


.heading-tools {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.live-clock {
    padding:
        10px 12px;

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

    border-radius:
        12px;

    color:
        var(
            --cyan
        );

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    font-size:
        0.86rem;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.refresh-button,
.panel-action {
    height:
        40px;

    padding:
        0 13px;

    border-radius:
        12px;

    color:
        #cfd5e8;

    font-size:
        0.72rem;

    font-weight:
        800;
}


.pulse-grid {
    display:
        grid;

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

    gap:
        10px;

    margin-bottom:
        12px;
}


.pulse-card {
    position:
        relative;

    min-width:
        0;

    min-height:
        110px;

    padding:
        14px;

    overflow:
        hidden;

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

    border-radius:
        18px;

    background:
        linear-gradient(
            160deg,
            rgba(
                255,
                255,
                255,
                0.045
            ),
            rgba(
                255,
                255,
                255,
                0.015
            )
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            255,
            255,
            0.03
        );
}


.pulse-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        auto
        -35px
        -55px
        auto;

    width:
        120px;

    height:
        120px;

    border-radius:
        50%;

    filter:
        blur(
            10px
        );

    opacity:
        0.16;
}


.pulse-card.cyan::before {
    background:
        var(
            --cyan
        );
}


.pulse-card.purple::before {
    background:
        var(
            --purple
        );
}


.pulse-card.pink::before {
    background:
        var(
            --pink
        );
}


.pulse-card.red::before {
    background:
        var(
            --red
        );
}


.pulse-card.green::before {
    background:
        var(
            --green
        );
}


.pulse-card.amber::before {
    background:
        var(
            --amber
        );
}


.pulse-card-top {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(
            --muted
        );

    font-size:
        0.61rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;
}


.pulse-card-top i {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        currentColor;

    animation:
        livePulse
        1.8s
        infinite;
}


.pulse-card strong {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-top:
        12px;

    font-size:
        1.9rem;

    line-height:
        1;
}


.pulse-card small {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-top:
        6px;

    color:
        var(
            --muted
        );

    font-size:
        0.62rem;
}


.pulse-wave {
    position:
        absolute;

    right:
        0;

    bottom:
        0;

    left:
        0;

    height:
        22px;

    opacity:
        0.32;

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

    clip-path:
        polygon(
            0 72%,
            14% 50%,
            28% 70%,
            42% 28%,
            58% 62%,
            74% 38%,
            100% 70%,
            100% 100%,
            0 100%
        );

    animation:
        waveShift
        3s
        ease-in-out
        infinite alternate;
}


.pulse-card.cyan {
    color:
        var(
            --cyan
        );
}


.pulse-card.purple {
    color:
        var(
            --purple
        );
}


.pulse-card.pink {
    color:
        var(
            --pink
        );
}


.pulse-card.red {
    color:
        var(
            --red
        );
}


.pulse-card.green {
    color:
        var(
            --green
        );
}


.pulse-card.amber {
    color:
        var(
            --amber
        );
}


.command-grid {
    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1.35fr
        )
        minmax(
            300px,
            0.65fr
        );

    gap:
        12px;
}


.mission-panel,
.full-view-panel {
    border:
        1px solid
        var(
            --panel-line
        );

    border-radius:
        var(
            --radius
        );

    background:
        linear-gradient(
            160deg,
            rgba(
                17,
                20,
                31,
                0.88
            ),
            rgba(
                9,
                11,
                18,
                0.86
            )
        );

    box-shadow:
        var(
            --shadow
        );

    backdrop-filter:
        blur(
            22px
        );
}


.mission-panel {
    min-width:
        0;

    overflow:
        hidden;
}


.panel-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    min-height:
        62px;

    padding:
        13px 15px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.055
        );
}


.panel-header h2 {
    margin:
        3px 0
        0;

    font-size:
        0.97rem;

    letter-spacing:
        -0.02em;
}


.panel-header-tools {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.panel-header-tools button,
.area-tabs button {
    border:
        0;

    color:
        var(
            --muted
        );

    background:
        transparent;

    font-size:
        0.64rem;

    font-weight:
        800;
}


.stream-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        5px 8px;

    border-radius:
        999px;

    color:
        var(
            --green
        );

    background:
        rgba(
            62,
            255,
            154,
            0.07
        );

    font-size:
        0.58rem;

    font-weight:
        900;
}


.stream-status i {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 12px
        rgba(
            62,
            255,
            154,
            0.7
        );
}


.activity-panel {
    min-height:
        320px;
}


.alert-panel {
    min-height:
        320px;
}


.chat-panel {
    grid-column:
        1 / -1;

    min-height:
        430px;
}


.team-panel,
.system-panel {
    min-height:
        260px;
}


.activity-stream,
.alert-stack,
.moderator-list {
    min-height:
        0;

    max-height:
        258px;

    overflow-y:
        auto;
}


.activity-stream.expanded {
    max-height:
        none;

    min-height:
        calc(
            100vh -
            190px
        );
}


.loading-state,
.empty-state {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    min-height:
        230px;

    padding:
        20px;

    color:
        var(
            --muted
        );

    text-align:
        center;
}


.loading-state.compact,
.empty-state.compact {
    min-height:
        150px;
}


.loading-state strong,
.empty-state strong {
    color:
        #dce2f2;

    font-size:
        0.77rem;
}


.loading-state small,
.empty-state small {
    max-width:
        280px;

    font-size:
        0.66rem;

    line-height:
        1.5;
}


.loading-orbit,
.connection-orbit {
    width:
        28px;

    height:
        28px;

    border:
        2px solid
        rgba(
            40,
            231,
            255,
            0.15
        );

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

    border-radius:
        50%;

    animation:
        spin
        1.1s
        linear
        infinite;
}


.activity-item {
    display:
        grid;

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

    gap:
        10px;

    align-items:
        center;

    padding:
        11px 14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.04
        );

    transition:
        150ms
        ease;
}


.activity-item:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.activity-icon {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    border-radius:
        11px;

    color:
        var(
            --cyan
        );

    background:
        rgba(
            40,
            231,
            255,
            0.07
        );
}


.activity-copy strong {
    display:
        block;

    font-size:
        0.72rem;
}


.activity-copy small,
.activity-time {
    color:
        var(
            --muted
        );

    font-size:
        0.61rem;
}


.alert-item {
    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        12px;

    padding:
        12px 14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.04
        );
}


.alert-item strong {
    display:
        block;

    font-size:
        0.72rem;
}


.alert-item small {
    display:
        block;

    margin-top:
        4px;

    color:
        var(
            --muted
        );

    font-size:
        0.62rem;
}


.alert-tag {
    align-self:
        start;

    padding:
        5px 8px;

    border-radius:
        999px;

    color:
        var(
            --red
        );

    background:
        rgba(
            255,
            83,
            111,
            0.08
        );

    font-size:
        0.58rem;

    font-weight:
        900;
}


.area-tabs {
    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    padding:
        3px;

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

    border-radius:
        11px;

    background:
        rgba(
            255,
            255,
            255,
            0.02
        );
}


.area-tabs button {
    min-width:
        38px;

    height:
        28px;

    padding:
        0 8px;

    border-radius:
        8px;
}


.area-tabs button.active {
    color:
        #071018;

    background:
        var(
            --cyan
        );

    box-shadow:
        0 0 16px
        rgba(
            40,
            231,
            255,
            0.22
        );
}


.chat-cockpit-layout {
    display:
        grid;

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

    min-height:
        365px;
}


.chat-main-column {
    display:
        grid;

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

    min-width:
        0;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );
}


.chat-feed {
    min-height:
        0;

    max-height:
        290px;

    padding:
        8px;

    overflow-y:
        auto;
}


.chat-message {
    position:
        relative;

    display:
        grid;

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

    gap:
        10px;

    padding:
        9px 10px;

    border:
        1px solid
        transparent;

    border-radius:
        13px;

    transition:
        130ms
        ease;
}


.chat-message:hover,
.chat-message.selected {
    border-color:
        rgba(
            40,
            231,
            255,
            0.12
        );

    background:
        rgba(
            40,
            231,
            255,
            0.035
        );
}


.chat-avatar {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    overflow:
        hidden;

    border-radius:
        12px;

    color:
        #d6ddf0;

    background:
        linear-gradient(
            135deg,
            rgba(
                155,
                108,
                255,
                0.22
            ),
            rgba(
                40,
                231,
                255,
                0.12
            )
        );

    font-size:
        0.72rem;

    font-weight:
        900;
}


.chat-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.chat-copy {
    min-width:
        0;
}


.chat-meta {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.chat-meta strong {
    font-size:
        0.71rem;
}


.area-badge {
    padding:
        3px 6px;

    border-radius:
        999px;

    color:
        var(
            --cyan
        );

    background:
        rgba(
            40,
            231,
            255,
            0.07
        );

    font-size:
        0.54rem;

    font-weight:
        900;
}


.chat-copy p {
    margin:
        4px 0
        0;

    color:
        #c8cede;

    font-size:
        0.72rem;

    line-height:
        1.45;

    overflow-wrap:
        anywhere;
}


.chat-time {
    color:
        #62697a;

    font-size:
        0.58rem;
}


.chat-composer {
    padding:
        10px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

    background:
        rgba(
            255,
            255,
            255,
            0.012
        );
}


.composer-row {
    display:
        grid;

    grid-template-columns:
        72px
        1fr
        86px;

    gap:
        8px;
}


.composer-row select,
.composer-row textarea {
    border:
        1px solid
        var(
            --panel-line
        );

    border-radius:
        12px;

    color:
        var(
            --text
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );
}


.composer-row select {
    padding:
        0 9px;

    font-size:
        0.68rem;

    font-weight:
        800;
}


.composer-row textarea {
    min-height:
        42px;

    max-height:
        100px;

    padding:
        11px 12px;

    resize:
        none;

    font-size:
        0.72rem;
}


.composer-row textarea:focus,
.composer-row select:focus {
    border-color:
        rgba(
            40,
            231,
            255,
            0.36
        );

    box-shadow:
        0 0 0 3px
        rgba(
            40,
            231,
            255,
            0.06
        );
}


.send-button {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        0;

    border-radius:
        12px;

    color:
        #061018;

    background:
        linear-gradient(
            135deg,
            var(
                --cyan
            ),
            #67f6ff
        );

    font-size:
        0.7rem;

    font-weight:
        900;

    box-shadow:
        0 0 22px
        rgba(
            40,
            231,
            255,
            0.16
        );
}


.send-button:hover {
    transform:
        translateY(
            -1px
        );
}


.composer-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        7px 2px
        0;

    color:
        #62697a;

    font-size:
        0.56rem;
}


.chat-inspector {
    min-width:
        0;

    padding:
        12px;
}


.inspector-placeholder {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        100%;

    padding:
        20px;

    color:
        var(
            --muted
        );

    text-align:
        center;
}


.inspector-placeholder strong {
    margin-top:
        10px;

    color:
        white;

    font-size:
        0.76rem;
}


.inspector-placeholder small {
    margin-top:
        5px;

    font-size:
        0.64rem;

    line-height:
        1.5;
}


.inspector-orb {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    border:
        1px solid
        rgba(
            155,
            108,
            255,
            0.28
        );

    border-radius:
        50%;

    color:
        var(
            --purple
        );

    background:
        rgba(
            155,
            108,
            255,
            0.07
        );

    box-shadow:
        0 0 28px
        rgba(
            155,
            108,
            255,
            0.12
        );

    font-size:
        1.35rem;
}


.moderator-item {
    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 14px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.04
        );
}


.moderator-item strong {
    display:
        block;

    font-size:
        0.7rem;
}


.moderator-item small {
    color:
        var(
            --muted
        );

    font-size:
        0.6rem;
}


.moderator-status-dot {
    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 12px
        rgba(
            62,
            255,
            154,
            0.7
        );
}


.team-boost {
    display:
        grid;

    grid-template-columns:
        36px
        1fr;

    gap:
        10px;

    margin:
        12px;

    padding:
        12px;

    border:
        1px solid
        rgba(
            255,
            79,
            216,
            0.11
        );

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            rgba(
                255,
                79,
                216,
                0.06
            ),
            rgba(
                155,
                108,
                255,
                0.06
            )
        );
}


.team-boost > span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(
            --pink
        );

    font-size:
        1.2rem;

    text-shadow:
        0 0 18px
        rgba(
            255,
            79,
            216,
            0.6
        );
}


.team-boost strong {
    display:
        block;

    font-size:
        0.7rem;
}


.team-boost small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(
            --muted
        );

    font-size:
        0.6rem;

    line-height:
        1.45;
}


.system-score {
    color:
        var(
            --green
        );

    font-size:
        1rem;

    font-weight:
        900;

    text-shadow:
        0 0 14px
        rgba(
            62,
            255,
            154,
            0.35
        );
}


.resource-list {
    display:
        grid;

    gap:
        13px;

    padding:
        16px;
}


.resource-row {
    display:
        grid;

    grid-template-columns:
        46px
        1fr
        44px;

    align-items:
        center;

    gap:
        10px;
}


.resource-row > span {
    color:
        var(
            --muted
        );

    font-size:
        0.63rem;

    font-weight:
        900;
}


.resource-track {
    height:
        7px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );
}


.resource-track i {
    display:
        block;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

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

    box-shadow:
        0 0 14px
        rgba(
            40,
            231,
            255,
            0.3
        );

    transition:
        width
        400ms
        ease;
}


.resource-row strong {
    font-size:
        0.65rem;

    text-align:
        right;
}


.system-facts {
    display:
        grid;

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

    gap:
        1px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );
}


.system-facts span {
    padding:
        12px;

    background:
        rgba(
            8,
            10,
            17,
            0.95
        );

    text-align:
        center;
}


.system-facts small {
    display:
        block;

    color:
        var(
            --muted
        );

    font-size:
        0.53rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.system-facts strong {
    display:
        block;

    margin-top:
        5px;

    font-size:
        0.67rem;
}


.full-view-panel {
    min-height:
        calc(
            100vh -
            170px
        );

    overflow:
        hidden;
}


.staff-placeholder,
.module-coming {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        40px;

    text-align:
        center;
}


.staff-placeholder h2,
.module-coming h2 {
    margin:
        16px 0
        7px;
}


.staff-placeholder p,
.module-coming p {
    max-width:
        520px;

    margin:
        0;

    color:
        var(
            --muted
        );

    line-height:
        1.6;
}


.staff-orbit,
.module-coming > span {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        88px;

    height:
        88px;

    border:
        1px solid
        rgba(
            255,
            79,
            216,
            0.2
        );

    border-radius:
        50%;

    color:
        var(
            --pink
        );

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                79,
                216,
                0.11
            ),
            transparent 70%
        );

    box-shadow:
        0 0 46px
        rgba(
            255,
            79,
            216,
            0.13
        );

    font-size:
        2rem;

    animation:
        livePulse
        2s
        infinite;
}


.toast-stack {
    position:
        fixed;

    z-index:
        50;

    right:
        18px;

    bottom:
        18px;

    display:
        grid;

    gap:
        8px;

    width:
        min(
            360px,
            calc(
                100vw -
                36px
            )
        );
}


.toast {
    padding:
        12px 14px;

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

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

    border-radius:
        14px;

    background:
        rgba(
            10,
            12,
            20,
            0.96
        );

    box-shadow:
        var(
            --shadow
        );

    animation:
        toastIn
        220ms
        ease;
}


.toast.error {
    border-left-color:
        var(
            --red
        );
}


.toast.success {
    border-left-color:
        var(
            --green
        );
}


.toast strong {
    display:
        block;

    font-size:
        0.72rem;
}


.toast small {
    display:
        block;

    margin-top:
        4px;

    color:
        var(
            --muted
        );

    font-size:
        0.62rem;
}


.connection-overlay {
    position:
        fixed;

    z-index:
        100;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(
            3,
            4,
            8,
            0.75
        );

    backdrop-filter:
        blur(
            18px
        );
}


.connection-overlay[hidden] {
    display:
        none;
}


.connection-card {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-width:
        300px;

    padding:
        28px;

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

    border-radius:
        22px;

    background:
        rgba(
            10,
            12,
            20,
            0.96
        );

    box-shadow:
        var(
            --shadow
        );

    text-align:
        center;
}


.connection-card strong {
    margin-top:
        14px;

    font-size:
        0.86rem;
}


.connection-card small {
    margin-top:
        5px;

    color:
        var(
            --muted
        );

    font-size:
        0.67rem;
}


::-webkit-scrollbar {
    width:
        9px;

    height:
        9px;
}


::-webkit-scrollbar-track {
    background:
        transparent;
}


::-webkit-scrollbar-thumb {
    border:
        2px solid
        transparent;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    background-clip:
        padding-box;
}


::-webkit-scrollbar-thumb:hover {
    background:
        rgba(
            40,
            231,
            255,
            0.26
        );

    background-clip:
        padding-box;
}


@keyframes spin {
    to {
        transform:
            rotate(
                360deg
            );
    }
}


@keyframes livePulse {
    0%,
    100% {
        transform:
            scale(
                1
            );

        opacity:
            1;
    }

    50% {
        transform:
            scale(
                0.76
            );

        opacity:
            0.45;
    }
}


@keyframes scanLine {
    from {
        transform:
            translateX(
                -100%
            );
    }

    to {
        transform:
            translateX(
                100%
            );
    }
}


@keyframes ambientFloat {
    from {
        transform:
            translate3d(
                -20px,
                -10px,
                0
            )
            scale(
                0.92
            );
    }

    to {
        transform:
            translate3d(
                20px,
                18px,
                0
            )
            scale(
                1.08
            );
    }
}


@keyframes waveShift {
    from {
        transform:
            translateX(
                -12px
            );
    }

    to {
        transform:
            translateX(
                12px
            );
    }
}


@keyframes toastIn {
    from {
        opacity:
            0;

        transform:
            translateY(
                10px
            );
    }

    to {
        opacity:
            1;

        transform:
            translateY(
                0
            );
    }
}


@media (
    max-width:
        1500px
) {

    :root {
        --nav-width:
            226px;
    }


    .system-ribbon {
        justify-content:
            flex-start;
    }


    .health-node {
        min-width:
            92px;

        padding:
            8px 10px;
    }


    .pulse-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );
    }

}


@media (
    max-height:
        820px
) {

    .pulse-card {
        min-height:
            96px;
    }


    .activity-panel,
    .alert-panel {
        min-height:
            280px;
    }


    .activity-stream,
    .alert-stack,
    .moderator-list {
        max-height:
            215px;
    }


    .chat-panel {
        min-height:
            390px;
    }


    .chat-feed {
        max-height:
            250px;
    }

}


/* ==========================================================
   SOC 4.0 INTERACTIVE PANELS
========================================================== */

.inspector-content h3 {
    margin:
        4px 0;

    font-size:
        1rem;
}


.inspector-content > p {
    margin:
        0 0 12px;

    color:
        var(
            --muted
        );

    font-size:
        0.63rem;
}


.inspector-message {
    padding:
        12px;

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

    border-radius:
        13px;

    color:
        #d5daea;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    font-size:
        0.7rem;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


.inspector-actions {
    display:
        grid;

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

    gap:
        7px;

    margin-top:
        12px;
}


.inspector-actions button,
.report-actions button {
    min-height:
        35px;

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

    border-radius:
        10px;

    color:
        #d5daea;

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-size:
        0.62rem;

    font-weight:
        800;
}


.inspector-actions button:hover,
.report-actions button:hover {
    border-color:
        rgba(
            40,
            231,
            255,
            0.28
        );

    background:
        rgba(
            40,
            231,
            255,
            0.07
        );
}


.inspector-actions button.danger,
.report-actions button.danger {
    color:
        var(
            --red
        );

    border-color:
        rgba(
            255,
            83,
            111,
            0.18
        );

    background:
        rgba(
            255,
            83,
            111,
            0.05
        );
}


.reports-layout {
    display:
        grid;

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

    gap:
        10px;

    padding:
        12px;
}


.report-card {
    padding:
        14px;

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

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.report-card-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.report-card-header strong {
    font-size:
        0.75rem;
}


.report-card-header span {
    padding:
        4px 7px;

    border-radius:
        999px;

    color:
        var(
            --red
        );

    background:
        rgba(
            255,
            83,
            111,
            0.08
        );

    font-size:
        0.55rem;

    font-weight:
        900;

    text-transform:
        uppercase;
}


.report-card > p {
    margin:
        7px 0;

    color:
        var(
            --muted
        );

    font-size:
        0.61rem;
}


.report-card blockquote {
    margin:
        10px 0;

    padding:
        10px 12px;

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

    border-radius:
        0 10px 10px 0;

    color:
        #cbd1e1;

    background:
        rgba(
            155,
            108,
            255,
            0.04
        );

    font-size:
        0.68rem;

    line-height:
        1.5;
}


.report-actions {
    display:
        grid;

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

    gap:
        6px;
}


/* ==========================================================
   SOC 4.0 - DARK FORM CONTROLS
========================================================== */

.chat-composer select,
.chat-composer option,
.composer-row select,
.composer-row option {
    color-scheme:
        dark;
}


.chat-composer select,
.composer-row select {
    appearance:
        auto;

    color:
        #f4f7ff !important;

    background:
        #0d111a !important;

    border-color:
        rgba(
            40,
            231,
            255,
            0.24
        ) !important;
}


.chat-composer select option,
.composer-row select option {
    color:
        #f4f7ff !important;

    background:
        #0d111a !important;
}


.chat-composer select:focus,
.composer-row select:focus {
    border-color:
        rgba(
            40,
            231,
            255,
            0.62
        ) !important;

    box-shadow:
        0 0 0 3px
        rgba(
            40,
            231,
            255,
            0.08
        );
}


/* ==========================================================
   SOC 4.0 - PLATFORM NEXUS
========================================================== */

.mission-nexus {
    display:
        grid;

    grid-template-columns:
        250px
        minmax(
            520px,
            1fr
        )
        300px;

    min-height:
        260px;

    margin-bottom:
        12px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            40,
            231,
            255,
            0.13
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            150deg,
            rgba(
                8,
                12,
                20,
                0.96
            ),
            rgba(
                11,
                8,
                20,
                0.94
            )
        );

    box-shadow:
        inset 0 1px
        rgba(
            255,
            255,
            255,
            0.03
        ),
        0 25px 70px
        rgba(
            0,
            0,
            0,
            0.32
        );
}


.nexus-radar {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-right:
        1px solid
        var(
            --panel-line
        );

    background:
        radial-gradient(
            circle,
            rgba(
                40,
                231,
                255,
                0.09
            ),
            transparent 63%
        );
}


.radar-grid {
    position:
        absolute;

    width:
        205px;

    height:
        205px;

    border:
        1px solid
        rgba(
            40,
            231,
            255,
            0.16
        );

    border-radius:
        50%;

    background:
        repeating-radial-gradient(
            circle,
            transparent 0,
            transparent 29px,
            rgba(
                40,
                231,
                255,
                0.09
            ) 30px
        );
}


.radar-grid::before,
.radar-grid::after {
    content:
        "";

    position:
        absolute;

    background:
        rgba(
            40,
            231,
            255,
            0.12
        );
}


.radar-grid::before {
    top:
        50%;

    left:
        0;

    width:
        100%;

    height:
        1px;
}


.radar-grid::after {
    top:
        0;

    left:
        50%;

    width:
        1px;

    height:
        100%;
}


.radar-sweep {
    position:
        absolute;

    width:
        205px;

    height:
        205px;

    border-radius:
        50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            transparent 315deg,
            rgba(
                40,
                231,
                255,
                0.03
            ) 328deg,
            rgba(
                40,
                231,
                255,
                0.55
            ) 360deg
        );

    animation:
        radarSweep
        4s
        linear
        infinite;
}


.radar-core {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        62px;

    height:
        62px;

    border:
        1px solid
        rgba(
            255,
            79,
            216,
            0.5
        );

    border-radius:
        50%;

    background:
        rgba(
            8,
            10,
            18,
            0.92
        );

    box-shadow:
        0 0 30px
        rgba(
            255,
            79,
            216,
            0.16
        );
}


.radar-core span {
    color:
        var(
            --pink
        );

    font-size:
        0.65rem;

    font-weight:
        900;
}


.radar-core strong {
    margin-top:
        2px;

    color:
        var(
            --green
        );

    font-size:
        0.54rem;
}


.radar-blip {
    position:
        absolute;

    z-index:
        4;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(
            --cyan
        );

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

    animation:
        nexusBlink
        1.8s
        infinite;
}


.blip-a {
    top:
        28%;

    left:
        32%;
}


.blip-b {
    top:
        63%;

    left:
        68%;

    animation-delay:
        -0.5s;
}


.blip-c {
    top:
        42%;

    left:
        76%;

    background:
        var(
            --purple
        );

    box-shadow:
        0 0 14px
        var(
            --purple
        );

    animation-delay:
        -1s;
}


.blip-d {
    top:
        72%;

    left:
        36%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 14px
        var(
            --green
        );

    animation-delay:
        -1.4s;
}


.platform-network {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(
                155,
                108,
                255,
                0.08
            ),
            transparent 56%
        );
}


.network-lines {
    position:
        absolute;

    z-index:
        1;

    inset:
        0;

    width:
        100%;

    height:
        100%;
}


.network-lines path {
    fill:
        none;

    stroke:
        rgba(
            40,
            231,
            255,
            0.18
        );

    stroke-width:
        1.4;

    stroke-dasharray:
        7 7;

    animation:
        networkFlow
        3s
        linear
        infinite;
}


.network-core {
    position:
        absolute;

    z-index:
        5;

    top:
        50%;

    left:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    width:
        90px;

    height:
        90px;

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

    border:
        1px solid
        rgba(
            40,
            231,
            255,
            0.48
        );

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(
                40,
                231,
                255,
                0.13
            ),
            rgba(
                155,
                108,
                255,
                0.13
            )
        );

    box-shadow:
        0 0 42px
        rgba(
            40,
            231,
            255,
            0.12
        );
}


.network-core-orbit {
    position:
        absolute;

    inset:
        -9px;

    border:
        1px dashed
        rgba(
            155,
            108,
            255,
            0.28
        );

    border-radius:
        34px;

    animation:
        spin
        8s
        linear
        infinite;
}


.network-core strong {
    color:
        var(
            --cyan
        );

    font-size:
        0.9rem;
}


.network-core small {
    margin-top:
        4px;

    color:
        var(
            --green
        );

    font-size:
        0.54rem;
}


.network-node {
    position:
        absolute;

    z-index:
        4;

    display:
        grid;

    grid-template-columns:
        10px
        1fr;

    gap:
        2px 8px;

    min-width:
        125px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-radius:
        13px;

    background:
        rgba(
            8,
            11,
            18,
            0.9
        );

    backdrop-filter:
        blur(
            10px
        );
}


.network-node i {
    grid-row:
        1 / 3;

    align-self:
        center;

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 13px
        var(
            --green
        );
}


.network-node strong {
    font-size:
        0.67rem;
}


.network-node small {
    color:
        var(
            --muted
        );

    font-size:
        0.55rem;
}


.node-gz {
    top:
        16px;

    left:
        19px;

    border-color:
        rgba(
            155,
            108,
            255,
            0.24
        );
}


.node-gb {
    bottom:
        18px;

    left:
        26px;

    border-color:
        rgba(
            62,
            255,
            154,
            0.2
        );
}


.node-cam {
    top:
        17px;

    right:
        18px;
}


.node-cinema {
    top:
        50%;

    right:
        16px;

    transform:
        translateY(
            -50%
        );

    border-color:
        rgba(
            255,
            201,
            90,
            0.22
        );
}


.node-live {
    right:
        35px;

    bottom:
        17px;

    border-color:
        rgba(
            255,
            79,
            216,
            0.22
        );
}


.nexus-feed {
    border-left:
        1px solid
        var(
            --panel-line
        );

    background:
        rgba(
            6,
            8,
            14,
            0.72
        );
}


.nexus-feed header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    height:
        42px;

    padding:
        0 13px;

    border-bottom:
        1px solid
        var(
            --panel-line
        );

    color:
        var(
            --cyan
        );

    font-size:
        0.6rem;

    font-weight:
        900;

    letter-spacing:
        0.12em;
}


.nexus-feed header i {
    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(
            --green
        );

    box-shadow:
        0 0 12px
        var(
            --green
        );

    animation:
        livePulse
        1.5s
        infinite;
}


#nexusActivity {
    max-height:
        218px;

    overflow:
        hidden;
}


.nexus-event {
    display:
        grid;

    grid-template-columns:
        46px
        1fr;

    gap:
        7px;

    padding:
        9px 12px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.035
        );

    animation:
        nexusEventIn
        260ms
        ease;
}


.nexus-event time {
    color:
        #626a7d;

    font-size:
        0.56rem;
}


.nexus-event span {
    color:
        #cbd2e2;

    font-size:
        0.61rem;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.nexus-waiting {
    padding:
        20px;

    color:
        var(
            --muted
        );

    font-size:
        0.62rem;

    text-align:
        center;
}


@keyframes radarSweep {
    to {
        transform:
            rotate(
                360deg
            );
    }
}


@keyframes nexusBlink {
    0%,
    100% {
        opacity:
            0.3;

        transform:
            scale(
                0.7
            );
    }

    50% {
        opacity:
            1;

        transform:
            scale(
                1.25
            );
    }
}


@keyframes networkFlow {
    to {
        stroke-dashoffset:
            -28;
    }
}


@keyframes nexusEventIn {
    from {
        opacity:
            0;

        transform:
            translateX(
                12px
            );
    }

    to {
        opacity:
            1;

        transform:
            translateX(
                0
            );
    }
}


/* ==========================================================
   SOC 4.0 - STAFF LOUNGE X
========================================================== */

.staff-heading {
    align-items:
        center;
}

.staff-heading-actions {
    display:
        flex;

    gap:
        9px;
}

.ghost-toggle,
.staff-call-button {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        42px;

    padding:
        0 13px;

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

    border-radius:
        13px;

    color:
        #dde3f4;

    background:
        rgba(255, 255, 255, 0.035);
}

.ghost-toggle:hover,
.staff-call-button:hover {
    border-color:
        rgba(155, 108, 255, 0.32);

    background:
        rgba(155, 108, 255, 0.08);
}

.ghost-toggle.active {
    border-color:
        rgba(155, 108, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(155, 108, 255, 0.18),
            rgba(255, 79, 216, 0.09)
        );

    box-shadow:
        0 0 24px
        rgba(155, 108, 255, 0.14);
}

.ghost-toggle strong,
.staff-call-button {
    font-size:
        0.68rem;

    font-weight:
        800;
}

.ghost-toggle i {
    color:
        var(--muted);

    font-style:
        normal;

    font-size:
        0.56rem;

    font-weight:
        900;
}

.staff-command-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(320px, 0.6fr);

    gap:
        12px;
}

.staff-hero-panel,
.staff-shift-panel,
.staff-mood-panel,
.staff-radar-panel,
.staff-fun-panel {
    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            155deg,
            rgba(17, 20, 31, 0.92),
            rgba(8, 10, 17, 0.9)
        );

    box-shadow:
        var(--shadow);
}

.staff-hero-panel,
.staff-shift-panel {
    min-height:
        410px;
}

.staff-panel-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        64px;

    padding:
        14px 16px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}

.staff-panel-header span:first-child {
    color:
        var(--pink);

    font-size:
        0.58rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;
}

.staff-panel-header h2 {
    margin:
        4px 0 0;

    font-size:
        0.95rem;
}

.staff-live-badge {
    color:
        var(--green) !important;

    font-size:
        0.58rem !important;

    animation:
        livePulse
        1.6s
        infinite;
}

.staff-card-grid {
    display:
        grid;

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

    gap:
        10px;

    padding:
        12px;
}

.staff-member-card {
    position:
        relative;

    min-height:
        260px;

    padding:
        16px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.012)
        );
}

.staff-member-card::after {
    content:
        "";

    position:
        absolute;

    right:
        -65px;

    bottom:
        -65px;

    width:
        160px;

    height:
        160px;

    border-radius:
        50%;

    background:
        rgba(155, 108, 255, 0.12);

    filter:
        blur(22px);
}

.staff-member-top {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}

.staff-member-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        58px;

    height:
        58px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(40, 231, 255, 0.3);

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(40, 231, 255, 0.16),
            rgba(155, 108, 255, 0.2)
        );

    font-size:
        1rem;

    font-weight:
        900;
}

.staff-member-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.staff-member-name strong {
    display:
        block;

    font-size:
        0.94rem;
}

.staff-member-name small {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        0.62rem;
}

.staff-status-badge {
    position:
        relative;

    z-index:
        2;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        10px;

    padding:
        6px 9px;

    border-radius:
        999px;

    color:
        var(--green);

    background:
        rgba(62, 255, 154, 0.07);

    font-size:
        0.6rem;

    font-weight:
        900;
}

.staff-status-badge.coffee_time {
    color:
        var(--amber);

    background:
        rgba(255, 201, 90, 0.08);
}

.staff-status-badge.afk,
.staff-status-badge.siesta {
    color:
        var(--purple);

    background:
        rgba(155, 108, 255, 0.08);
}

.staff-status-badge.dinner {
    color:
        #ff995f;

    background:
        rgba(255, 153, 95, 0.08);
}

.staff-status-badge.going_to_bed {
    color:
        #7aa7ff;

    background:
        rgba(122, 167, 255, 0.08);
}

.staff-member-stats {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

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

    gap:
        7px;

    margin-top:
        14px;
}

.staff-member-stat {
    padding:
        9px;

    border:
        1px solid
        rgba(255, 255, 255, 0.045);

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.02);
}

.staff-member-stat small {
    display:
        block;

    color:
        var(--muted);

    font-size:
        0.53rem;

    font-weight:
        800;

    letter-spacing:
        0.07em;
}

.staff-member-stat strong {
    display:
        block;

    margin-top:
        4px;

    font-size:
        0.68rem;
}

.staff-member-location {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        12px;

    padding:
        9px 10px;

    border-radius:
        11px;

    color:
        #c9d0df;

    background:
        rgba(40, 231, 255, 0.035);

    font-size:
        0.62rem;
}

.ghost-chip {
    position:
        absolute;

    z-index:
        3;

    top:
        12px;

    right:
        12px;

    padding:
        5px 7px;

    border-radius:
        999px;

    color:
        #d4c5ff;

    background:
        rgba(155, 108, 255, 0.11);

    font-size:
        0.55rem;

    font-weight:
        900;
}

.shift-clock {
    color:
        var(--cyan);

    font-size:
        0.75rem;
}

.shift-board {
    padding:
        10px 14px;
}

.shift-entry {
    display:
        grid;

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

    gap:
        10px;

    align-items:
        center;

    padding:
        12px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.045);
}

.shift-entry-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        36px;

    height:
        36px;

    overflow:
        hidden;

    border-radius:
        11px;

    color:
        var(--cyan);

    background:
        rgba(40, 231, 255, 0.07);

    font-size:
        0.68rem;

    font-weight:
        900;
}

.shift-entry-copy strong {
    display:
        block;

    font-size:
        0.7rem;
}

.shift-entry-copy small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        0.58rem;
}

.shift-entry-time {
    color:
        var(--cyan);

    font-size:
        0.62rem;

    font-weight:
        800;
}

.staff-mood-panel {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        260px;

    padding:
        22px;

    text-align:
        center;
}

.team-mood-orb {
    display:
        grid;

    place-items:
        center;

    width:
        74px;

    height:
        74px;

    border:
        1px solid
        rgba(40, 231, 255, 0.16);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(40, 231, 255, 0.11),
            transparent 70%
        );

    font-size:
        2rem;

    animation:
        moodFloat
        3s
        ease-in-out
        infinite alternate;
}

.team-mood-kicker {
    margin-top:
        12px;

    color:
        var(--cyan);

    font-size:
        0.57rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;
}

.team-mood-title {
    margin-top:
        4px;

    font-size:
        1.4rem;
}

.staff-mood-panel p {
    max-width:
        400px;

    margin:
        6px 0 14px;

    color:
        var(--muted);

    font-size:
        0.63rem;
}

.team-mood-stats {
    display:
        grid;

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

    width:
        100%;

    gap:
        6px;
}

.team-mood-stats span {
    padding:
        8px;

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, 0.025);
}

.team-mood-stats small {
    display:
        block;

    color:
        var(--muted);

    font-size:
        0.48rem;
}

.team-mood-stats strong {
    display:
        block;

    margin-top:
        4px;

    font-size:
        0.72rem;
}

.staff-radar-panel,
.staff-fun-panel {
    min-height:
        260px;
}

.staff-radar-list {
    padding:
        8px 14px;
}

.staff-radar-entry {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        11px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.04);
}

.staff-radar-entry strong {
    font-size:
        0.66rem;
}

.staff-radar-entry span {
    color:
        var(--cyan);

    font-size:
        0.58rem;
}

.staff-fun-grid {
    display:
        grid;

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

    gap:
        6px;

    padding:
        14px;
}

.staff-fun-grid div {
    padding:
        12px 8px;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, 0.025);

    text-align:
        center;
}

.staff-fun-grid span {
    display:
        block;

    font-size:
        1.1rem;
}

.staff-fun-grid strong {
    display:
        block;

    margin-top:
        5px;

    font-size:
        0.9rem;
}

.staff-fun-grid small {
    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-size:
        0.53rem;
}

.staff-quote {
    margin:
        0 14px 14px;

    padding:
        11px;

    border:
        1px solid
        rgba(255, 79, 216, 0.09);

    border-radius:
        12px;

    color:
        #d5d9e7;

    background:
        rgba(255, 79, 216, 0.03);

    font-size:
        0.62rem;

    text-align:
        center;
}

@keyframes moodFloat {
    from {
        transform:
            translateY(-3px);
    }

    to {
        transform:
            translateY(4px);
    }
}


/* ==========================================================
   SOC 4.0 - STAFF STATUS MENU
========================================================== */

.moderator-menu-title {
    display:
        block;

    padding:
        5px 10px 8px;

    color:
        var(--cyan);

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;
}


.moderator-menu button > span {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;
}


.moderator-menu button > span strong {
    color:
        #edf1ff;

    font-size:
        0.67rem;

    font-weight:
        800;
}


.moderator-menu button > span small {
    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        0.52rem;
}


.status-dinner {
    background:
        #ff995f;
}


.status-siesta {
    background:
        #9b6cff;
}


.status-coffee {
    background:
        #ffc95a;

    box-shadow:
        0 0 12px
        rgba(255, 201, 90, 0.5);
}


.status-bed {
    background:
        #7aa7ff;
}


.moderator-presence.status-on_duty {
    background:
        var(--green);

    box-shadow:
        0 0 14px
        rgba(62, 255, 154, 0.8);
}


.moderator-presence.status-afk {
    background:
        var(--purple);

    box-shadow:
        0 0 14px
        rgba(155, 108, 255, 0.7);
}


.moderator-presence.status-dinner {
    background:
        #ff995f;

    box-shadow:
        0 0 14px
        rgba(255, 153, 95, 0.65);
}


.moderator-presence.status-siesta {
    background:
        var(--purple);

    box-shadow:
        0 0 14px
        rgba(155, 108, 255, 0.7);
}


.moderator-presence.status-coffee_time {
    background:
        var(--amber);

    box-shadow:
        0 0 14px
        rgba(255, 201, 90, 0.72);
}


.moderator-presence.status-going_to_bed {
    background:
        #7aa7ff;

    box-shadow:
        0 0 14px
        rgba(122, 167, 255, 0.7);
}


.moderator-presence.status-offline {
    background:
        #686e7f;

    box-shadow:
        none;
}


/* ==========================================================
   SOC 4.0 - STAFF CHAT
========================================================== */

.staff-chat-panel {
    grid-column:
        1 / -1;

    min-height:
        430px;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            155deg,
            rgba(17, 20, 31, 0.94),
            rgba(8, 10, 17, 0.92)
        );

    box-shadow:
        var(--shadow);
}


.staff-chat-header-tools {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.staff-chat-room-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        5px 8px;

    border-radius:
        999px;

    color:
        var(--amber);

    background:
        rgba(255, 201, 90, 0.07);

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.staff-chat-room-status i {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 10px
        currentColor;
}


.staff-chat-room-status.online {
    color:
        var(--green);

    background:
        rgba(62, 255, 154, 0.07);
}


.staff-chat-mini-button {
    display:
        grid;

    place-items:
        center;

    width:
        31px;

    height:
        31px;

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

    border-radius:
        9px;

    color:
        var(--cyan);

    background:
        rgba(255, 255, 255, 0.025);
}


.staff-chat-mini-button:hover {
    border-color:
        rgba(40, 231, 255, 0.3);

    background:
        rgba(40, 231, 255, 0.07);
}


.staff-chat-feed {
    min-height:
        300px;

    max-height:
        460px;

    padding:
        10px;

    overflow-y:
        auto;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(155, 108, 255, 0.045),
            transparent 45%
        );
}


.staff-chat-message {
    position:
        relative;

    display:
        grid;

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

    gap:
        10px;

    align-items:
        start;

    padding:
        10px;

    border:
        1px solid
        transparent;

    border-radius:
        14px;

    transition:
        140ms ease;
}


.staff-chat-message:hover {
    border-color:
        rgba(255, 255, 255, 0.06);

    background:
        rgba(255, 255, 255, 0.022);
}


.staff-chat-message.mine {
    background:
        linear-gradient(
            90deg,
            rgba(40, 231, 255, 0.035),
            transparent
        );
}


.staff-chat-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        38px;

    height:
        38px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(155, 108, 255, 0.24);

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            rgba(155, 108, 255, 0.18),
            rgba(40, 231, 255, 0.1)
        );

    color:
        white;

    font-size:
        0.7rem;

    font-weight:
        900;
}


.staff-chat-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.staff-chat-message-main {
    min-width:
        0;
}


.staff-chat-message-meta {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.staff-chat-message-meta strong {
    font-size:
        0.69rem;
}


.staff-chat-ghost {
    padding:
        2px 5px;

    border-radius:
        999px;

    color:
        #cab7ff;

    background:
        rgba(155, 108, 255, 0.08);

    font-size:
        0.49rem;

    font-weight:
        900;
}


.staff-chat-message-text {
    margin-top:
        5px;

    color:
        #d0d6e6;

    font-size:
        0.69rem;

    line-height:
        1.5;

    overflow-wrap:
        anywhere;
}


.staff-chat-edited {
    margin-left:
        5px;

    color:
        #697084;

    font-size:
        0.5rem;
}


.staff-chat-time {
    padding-top:
        2px;

    color:
        #62697c;

    font-size:
        0.55rem;
}


.staff-chat-reply-preview {
    margin:
        6px 0;

    padding:
        7px 9px;

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

    border-radius:
        0 9px 9px 0;

    color:
        #9ca5bb;

    background:
        rgba(155, 108, 255, 0.035);

    font-size:
        0.58rem;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.staff-chat-actions {
    position:
        absolute;

    top:
        6px;

    right:
        6px;

    display:
        none;

    gap:
        4px;

    padding:
        4px;

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

    border-radius:
        9px;

    background:
        rgba(7, 9, 15, 0.96);

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.3);
}


.staff-chat-message:hover .staff-chat-actions {
    display:
        flex;
}


.staff-chat-actions button {
    display:
        grid;

    place-items:
        center;

    min-width:
        27px;

    height:
        27px;

    padding:
        0 7px;

    border:
        0;

    border-radius:
        7px;

    color:
        #aeb5c8;

    background:
        transparent;

    font-size:
        0.55rem;
}


.staff-chat-actions button:hover {
    color:
        white;

    background:
        rgba(255, 255, 255, 0.05);
}


.staff-chat-actions button.danger:hover {
    color:
        var(--red);

    background:
        rgba(255, 83, 111, 0.07);
}


.staff-chat-reply {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        9px 12px;

    border-top:
        1px solid
        rgba(155, 108, 255, 0.12);

    background:
        rgba(155, 108, 255, 0.04);
}


.staff-chat-reply[hidden] {
    display:
        none;
}


.staff-chat-reply > div {
    min-width:
        0;
}


.staff-chat-reply span {
    display:
        block;

    color:
        var(--purple);

    font-size:
        0.5rem;

    font-weight:
        900;

    letter-spacing:
        0.1em;
}


.staff-chat-reply strong {
    display:
        inline;

    margin-right:
        5px;

    font-size:
        0.62rem;
}


.staff-chat-reply small {
    color:
        var(--muted);

    font-size:
        0.57rem;
}


.staff-chat-reply button {
    width:
        29px;

    height:
        29px;

    border:
        0;

    border-radius:
        8px;

    color:
        var(--muted);

    background:
        rgba(255, 255, 255, 0.03);
}


.staff-chat-composer {
    padding:
        10px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);

    background:
        rgba(5, 7, 12, 0.5);
}


.staff-chat-compose-row {
    display:
        grid;

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

    gap:
        8px;
}


.staff-chat-fun-button,
.staff-chat-send {
    border:
        1px solid
        var(--panel-line);

    border-radius:
        12px;
}


.staff-chat-fun-button {
    color:
        var(--pink);

    background:
        rgba(255, 79, 216, 0.045);

    font-size:
        1rem;
}


.staff-chat-fun-button:hover {
    border-color:
        rgba(255, 79, 216, 0.28);
}


.staff-chat-compose-row textarea {
    min-height:
        42px;

    max-height:
        120px;

    padding:
        11px 12px;

    resize:
        none;

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

    border-radius:
        12px;

    color:
        white;

    background:
        rgba(255, 255, 255, 0.03);

    font-size:
        0.69rem;
}


.staff-chat-compose-row textarea:focus {
    border-color:
        rgba(40, 231, 255, 0.36);

    box-shadow:
        0 0 0 3px
        rgba(40, 231, 255, 0.05);
}


.staff-chat-send {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    color:
        #061018;

    background:
        linear-gradient(
            135deg,
            var(--cyan),
            #79f7ff
        );

    font-size:
        0.65rem;

    font-weight:
        900;

    box-shadow:
        0 0 20px
        rgba(40, 231, 255, 0.12);
}


.staff-chat-send:disabled {
    cursor:
        not-allowed;

    opacity:
        0.45;
}


.staff-chat-compose-footer {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        7px 2px 0;

    color:
        #62697a;

    font-size:
        0.52rem;
}


/* ==========================================================
   SOC 4.0 - STAFF VOICE
   PHASE 3 - PARTICIPANTS + SPEAKING + AUDIO
========================================================== */

.staff-voice-panel {
    grid-column:
        1 / -1;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            40,
            231,
            255,
            0.13
        );

    border-radius:
        22px;

    background:
        linear-gradient(
            155deg,
            rgba(
                13,
                18,
                28,
                0.96
            ),
            rgba(
                8,
                10,
                17,
                0.94
            )
        );

    box-shadow:
        var(
            --shadow
        );
}


.staff-voice-panel-header {
    min-height:
        58px;
}


.staff-voice-panel-meta {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.staff-voice-room-status {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        6px 9px;

    border-radius:
        999px;

    color:
        var(
            --muted
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-size:
        0.54rem;

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.staff-voice-room-status i {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 10px
        currentColor;
}


.staff-voice-room-status.online {
    color:
        var(
            --green
        );

    background:
        rgba(
            62,
            255,
            154,
            0.07
        );
}


.staff-voice-room-status.connecting,
.staff-voice-room-status.reconnecting {
    color:
        var(
            --amber
        );

    background:
        rgba(
            255,
            201,
            90,
            0.07
        );
}


.staff-voice-room-status.error {
    color:
        var(
            --red
        );

    background:
        rgba(
            255,
            83,
            111,
            0.07
        );
}


.staff-voice-count {
    display:
        grid;

    place-items:
        center;

    min-width:
        30px;

    height:
        30px;

    padding:
        0 8px;

    border:
        1px solid
        rgba(
            40,
            231,
            255,
            0.16
        );

    border-radius:
        10px;

    color:
        var(
            --cyan
        );

    background:
        rgba(
            40,
            231,
            255,
            0.055
        );

    font-size:
        0.67rem;
}


.staff-voice-body {
    display:
        grid;

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

    min-height:
        122px;
}


.staff-voice-participants {
    display:
        flex;

    align-items:
        stretch;

    gap:
        8px;

    min-width:
        0;

    padding:
        10px;

    overflow-x:
        auto;
}


.staff-voice-participant {
    display:
        grid;

    grid-template-columns:
        42px
        minmax(
            110px,
            1fr
        )
        auto;

    align-items:
        center;

    gap:
        10px;

    flex:
        0 0
        235px;

    min-width:
        0;

    padding:
        11px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.06
        );

    border-radius:
        15px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    transition:
        border-color
        140ms
        ease,
        box-shadow
        140ms
        ease,
        transform
        140ms
        ease;
}


.staff-voice-participant.speaking {
    border-color:
        rgba(
            62,
            255,
            154,
            0.58
        );

    box-shadow:
        0 0 24px
        rgba(
            62,
            255,
            154,
            0.14
        );

    transform:
        translateY(
            -1px
        );
}


.staff-voice-participant-avatar {
    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    overflow:
        hidden;

    border:
        2px solid
        rgba(
            40,
            231,
            255,
            0.24
        );

    border-radius:
        13px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            rgba(
                40,
                231,
                255,
                0.15
            ),
            rgba(
                155,
                108,
                255,
                0.2
            )
        );

    font-size:
        0.72rem;

    font-weight:
        900;
}


.staff-voice-participant.speaking
.staff-voice-participant-avatar {
    border-color:
        var(
            --green
        );

    box-shadow:
        0 0 18px
        rgba(
            62,
            255,
            154,
            0.45
        );
}


.staff-voice-participant-avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.staff-voice-participant-copy {
    min-width:
        0;
}


.staff-voice-participant-name {
    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    min-width:
        0;
}


.staff-voice-participant-name strong {
    max-width:
        130px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        0.68rem;
}


.staff-voice-you,
.staff-voice-ghost {
    padding:
        3px 5px;

    border-radius:
        999px;

    font-size:
        0.46rem;

    font-weight:
        900;
}


.staff-voice-you {
    color:
        var(
            --cyan
        );

    background:
        rgba(
            40,
            231,
            255,
            0.08
        );
}


.staff-voice-ghost {
    color:
        #d9c9ff;

    background:
        rgba(
            155,
            108,
            255,
            0.1
        );
}


.staff-voice-participant-meta {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        5px;

    color:
        var(
            --muted
        );

    font-size:
        0.52rem;
}


.staff-voice-quality {
    color:
        var(
            --green
        );

    font-size:
        0.48rem;

    font-weight:
        900;
}


.staff-voice-quality.quality-poor {
    color:
        var(
            --amber
        );
}


.staff-voice-quality.quality-lost {
    color:
        var(
            --red
        );
}


.staff-voice-indicators {
    display:
        flex;

    align-items:
        center;

    gap:
        6px;
}


.staff-voice-speaking-indicator {
    min-width:
        26px;

    color:
        #646b7e;

    font-size:
        0.55rem;

    font-weight:
        900;

    letter-spacing:
        -0.08em;
}


.staff-voice-participant.speaking
.staff-voice-speaking-indicator {
    color:
        var(
            --green
        );

    text-shadow:
        0 0 10px
        rgba(
            62,
            255,
            154,
            0.7
        );
}


.staff-voice-mic-indicator {
    font-size:
        0.72rem;
}


.staff-voice-now-speaking {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );

    background:
        radial-gradient(
            circle,
            rgba(
                62,
                255,
                154,
                0.055
            ),
            transparent 70%
        );

    text-align:
        center;
}


.staff-voice-now-label {
    color:
        var(
            --green
        );

    font-size:
        0.5rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;
}


.staff-voice-now-speaking strong {
    max-width:
        180px;

    margin-top:
        8px;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        0.82rem;
}


.staff-voice-now-speaking small {
    margin-top:
        4px;

    color:
        var(
            --muted
        );

    font-size:
        0.5rem;
}


.staff-voice-empty {
    display:
        flex;

    flex:
        1;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        220px;

    min-height:
        100px;

    color:
        var(
            --muted
        );

    text-align:
        center;
}


.staff-voice-empty > span {
    font-size:
        1.2rem;
}


.staff-voice-empty strong {
    margin-top:
        5px;

    color:
        #dfe5f4;

    font-size:
        0.65rem;
}


.staff-voice-empty small {
    margin-top:
        3px;

    font-size:
        0.53rem;
}


.staff-voice-audio-mount {
    position:
        fixed;

    width:
        1px;

    height:
        1px;

    overflow:
        hidden;

    opacity:
        0;

    pointer-events:
        none;
}


.staff-call-button.connected,
.staff-voice-microphone-button.active {
    border-color:
        rgba(
            62,
            255,
            154,
            0.42
        );

    color:
        var(
            --green
        );

    background:
        rgba(
            62,
            255,
            154,
            0.08
        );

    box-shadow:
        0 0 18px
        rgba(
            62,
            255,
            154,
            0.1
        );
}


.staff-call-button.connecting,
.staff-call-button.reconnecting {
    border-color:
        rgba(
            255,
            201,
            90,
            0.38
        );

    color:
        var(
            --amber
        );
}


.staff-call-button.error {
    border-color:
        rgba(
            255,
            83,
            111,
            0.38
        );

    color:
        var(
            --red
        );
}


.staff-voice-microphone-button.muted {
    color:
        var(
            --amber
        );

    border-color:
        rgba(
            255,
            201,
            90,
            0.24
        );
}


/* ==========================================================
   SOC 4.0 - STAFF VIDEO
========================================================== */

.staff-video-camera-button.active {
    color:
        var(--green);

    border-color:
        rgba(62, 255, 154, 0.42);

    background:
        rgba(62, 255, 154, 0.08);

    box-shadow:
        0 0 18px
        rgba(62, 255, 154, 0.1);
}


.staff-video-stage {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);

    background:
        rgba(4, 6, 11, 0.55);
}


.staff-video-stage-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    min-height:
        52px;

    padding:
        10px 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.045);
}


.staff-video-stage-header > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.staff-video-stage-header span {
    color:
        var(--pink);

    font-size:
        0.5rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;
}


.staff-video-stage-header strong {
    font-size:
        0.72rem;
}


.staff-video-stage-header small {
    color:
        var(--muted);

    font-size:
        0.55rem;
}


.staff-video-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                250px,
                1fr
            )
        );

    gap:
        10px;

    padding:
        10px;
}


.staff-video-card {
    position:
        relative;

    min-width:
        0;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        17px;

    background:
        radial-gradient(
            circle at center,
            rgba(155, 108, 255, 0.1),
            rgba(6, 8, 13, 0.98)
        );

    transition:
        150ms ease;
}


.staff-video-card.active {
    border-color:
        rgba(40, 231, 255, 0.28);
}


.staff-video-card.speaking {
    border-color:
        rgba(62, 255, 154, 0.62);

    box-shadow:
        0 0 26px
        rgba(62, 255, 154, 0.16);
}


.staff-video-media,
.staff-video-placeholder {
    position:
        absolute;

    inset:
        0;
}


.staff-video-media {
    z-index:
        2;
}


.staff-video-element {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    background:
        #030408;
}


.staff-video-placeholder {
    z-index:
        1;

    display:
        grid;

    place-items:
        center;
}


.staff-video-placeholder img {
    width:
        74px;

    height:
        74px;

    border:
        2px solid
        rgba(155, 108, 255, 0.3);

    border-radius:
        22px;

    object-fit:
        cover;

    opacity:
        0.65;
}


.staff-video-placeholder > span {
    display:
        grid;

    place-items:
        center;

    width:
        74px;

    height:
        74px;

    border:
        2px solid
        rgba(155, 108, 255, 0.3);

    border-radius:
        22px;

    color:
        white;

    background:
        linear-gradient(
            135deg,
            rgba(40, 231, 255, 0.14),
            rgba(155, 108, 255, 0.22)
        );

    font-size:
        1rem;

    font-weight:
        900;
}


.staff-video-card footer {
    position:
        absolute;

    z-index:
        4;

    right:
        0;

    bottom:
        0;

    left:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        30px 12px
        10px;

    background:
        linear-gradient(
            transparent,
            rgba(2, 4, 8, 0.92)
        );
}


.staff-video-card footer > div {
    min-width:
        0;
}


.staff-video-card footer strong {
    display:
        block;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        0.68rem;
}


.staff-video-card footer small {
    display:
        block;

    margin-top:
        2px;

    color:
        var(--cyan);

    font-size:
        0.48rem;

    font-weight:
        900;
}


.staff-video-camera-state {
    flex:
        0 0 auto;

    padding:
        5px 7px;

    border-radius:
        999px;

    color:
        var(--muted);

    background:
        rgba(255, 255, 255, 0.06);

    font-size:
        0.48rem;

    font-weight:
        900;
}


.staff-video-card.active
.staff-video-camera-state {
    color:
        var(--green);

    background:
        rgba(62, 255, 154, 0.09);
}


/* ==========================================================
   SOC 4.0 - STAFF SCREENSHARE
========================================================== */

.staff-screenshare-button.active {
    color:
        var(--green);

    border-color:
        rgba(62, 255, 154, 0.42);

    background:
        rgba(62, 255, 154, 0.08);

    box-shadow:
        0 0 18px
        rgba(62, 255, 154, 0.1);
}


.staff-screenshare-stage {
    display:
        none;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.05);

    background:
        rgba(4, 6, 11, 0.72);
}


.staff-screenshare-stage.active {
    display:
        block;
}


.staff-screenshare-stage-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        52px;

    padding:
        10px 14px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.045);
}


.staff-screenshare-stage-header > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;
}


.staff-screenshare-stage-header span {
    color:
        var(--cyan);

    font-size:
        0.5rem;

    font-weight:
        900;

    letter-spacing:
        0.13em;
}


.staff-screenshare-stage-header strong {
    font-size:
        0.72rem;
}


.staff-screenshare-stage-header small {
    color:
        var(--muted);

    font-size:
        0.55rem;
}


.staff-screenshare-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                420px,
                1fr
            )
        );

    gap:
        10px;

    padding:
        10px;
}


.staff-screenshare-card {
    position:
        relative;

    aspect-ratio:
        16 / 9;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius:
        17px;

    background:
        #030408;
}


.staff-screenshare-card.active {
    border-color:
        rgba(40, 231, 255, 0.35);

    box-shadow:
        0 0 28px
        rgba(40, 231, 255, 0.08);
}


.staff-screenshare-media,
.staff-screenshare-placeholder {
    position:
        absolute;

    inset:
        0;
}


.staff-screenshare-media {
    z-index:
        2;
}


.staff-screenshare-element {
    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    background:
        #000;
}


.staff-screenshare-placeholder {
    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        var(--muted);
}


.staff-screenshare-placeholder > span {
    font-size:
        2rem;
}


.staff-screenshare-placeholder strong {
    font-size:
        0.7rem;
}


.staff-screenshare-card footer {
    position:
        absolute;

    z-index:
        4;

    right:
        0;

    bottom:
        0;

    left:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        30px 12px
        10px;

    background:
        linear-gradient(
            transparent,
            rgba(2, 4, 8, 0.92)
        );
}


.staff-screenshare-card footer strong {
    font-size:
        0.68rem;
}


.staff-screenshare-card footer span {
    padding:
        5px 7px;

    border-radius:
        999px;

    color:
        var(--green);

    background:
        rgba(62, 255, 154, 0.09);

    font-size:
        0.48rem;

    font-weight:
        900;
}


/* ==========================================================
   SOC 4.0 - GIF LIBRARY
========================================================== */

.gif-library-layout {
    display:
        grid;

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

    gap:
        12px;

    min-height:
        calc(
            100vh -
            180px
        );
}


.gif-library-upload-panel,
.gif-library-browser-panel,
.gif-library-inspector-panel {
    min-width:
        0;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        linear-gradient(
            155deg,
            rgba(
                17,
                20,
                31,
                0.94
            ),
            rgba(
                8,
                10,
                17,
                0.92
            )
        );

    box-shadow:
        var(
            --shadow
        );
}


.gif-library-panel-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    min-height:
        62px;

    padding:
        13px
        15px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.05
        );
}


.gif-library-panel-header span {
    color:
        var(
            --cyan
        );

    font-size:
        0.57rem;

    font-weight:
        900;

    letter-spacing:
        0.14em;
}


.gif-library-panel-header h2 {
    margin:
        4px 0
        0;

    font-size:
        0.94rem;
}


.gif-library-panel-header > strong {
    color:
        var(
            --cyan
        );

    font-size:
        0.95rem;
}


.gif-library-upload-form {
    display:
        grid;

    gap:
        12px;

    padding:
        14px;
}


.gif-library-dropzone {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        170px;

    padding:
        18px;

    border:
        1px dashed
        rgba(
            40,
            231,
            255,
            0.25
        );

    border-radius:
        17px;

    background:
        rgba(
            40,
            231,
            255,
            0.035
        );

    text-align:
        center;

    cursor:
        pointer;

    transition:
        150ms
        ease;
}


.gif-library-dropzone:hover,
.gif-library-dropzone.dragging {
    border-color:
        rgba(
            40,
            231,
            255,
            0.65
        );

    background:
        rgba(
            40,
            231,
            255,
            0.075
        );
}


.gif-library-dropzone input {
    display:
        none;
}


.gif-library-dropzone > span {
    display:
        grid;

    place-items:
        center;

    width:
        54px;

    height:
        54px;

    margin-bottom:
        11px;

    border:
        1px solid
        rgba(
            155,
            108,
            255,
            0.28
        );

    border-radius:
        16px;

    color:
        var(
            --pink
        );

    background:
        rgba(
            155,
            108,
            255,
            0.08
        );

    font-size:
        0.8rem;

    font-weight:
        900;
}


.gif-library-dropzone strong {
    font-size:
        0.71rem;
}


.gif-library-dropzone small {
    margin-top:
        5px;

    color:
        var(
            --muted
        );

    font-size:
        0.57rem;
}


.gif-library-preview {
    display:
        grid;

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

    align-items:
        center;

    gap:
        10px;

    padding:
        9px;

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

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );
}


.gif-library-preview[hidden] {
    display:
        none;
}


.gif-library-preview img {
    width:
        72px;

    height:
        60px;

    object-fit:
        cover;

    border-radius:
        10px;

    background:
        #020306;
}


.gif-library-preview strong,
.gif-library-preview small {
    display:
        block;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.gif-library-preview strong {
    font-size:
        0.66rem;
}


.gif-library-preview small {
    margin-top:
        4px;

    color:
        var(
            --muted
        );

    font-size:
        0.55rem;
}


.gif-library-field {
    display:
        grid;

    gap:
        6px;
}


.gif-library-field > span {
    color:
        var(
            --muted
        );

    font-size:
        0.57rem;

    font-weight:
        800;

    letter-spacing:
        0.06em;
}


.gif-library-field input,
.gif-library-toolbar input,
.gif-library-toolbar select {
    min-height:
        40px;

    padding:
        0
        11px;

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

    border-radius:
        11px;

    color:
        var(
            --text
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );
}


.gif-library-field input:focus,
.gif-library-toolbar input:focus,
.gif-library-toolbar select:focus {
    border-color:
        rgba(
            40,
            231,
            255,
            0.42
        );

    box-shadow:
        0 0 0
        3px
        rgba(
            40,
            231,
            255,
            0.05
        );
}


.gif-library-checkbox {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #cbd2e2;

    font-size:
        0.62rem;
}


.gif-library-progress {
    display:
        grid;

    gap:
        7px;
}


.gif-library-progress[hidden] {
    display:
        none;
}


.gif-library-progress > div:first-child {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    color:
        var(
            --muted
        );

    font-size:
        0.58rem;
}


.gif-library-progress-track {
    height:
        7px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.06
        );
}


.gif-library-progress-track i {
    display:
        block;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

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

    transition:
        width
        120ms
        linear;
}


.gif-library-submit {
    min-height:
        42px;

    border:
        0;

    border-radius:
        12px;

    color:
        #051018;

    background:
        linear-gradient(
            135deg,
            var(
                --cyan
            ),
            #78f8ff
        );

    font-size:
        0.68rem;

    font-weight:
        900;
}


.gif-library-submit:disabled {
    cursor:
        not-allowed;

    opacity:
        0.5;
}


.gif-library-toolbar {
    display:
        grid;

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

    gap:
        8px;

    padding:
        12px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.045
        );
}


.gif-library-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                145px,
                1fr
            )
        );

    gap:
        9px;

    max-height:
        calc(
            100vh -
            290px
        );

    padding:
        12px;

    overflow-y:
        auto;
}


.gif-library-card {
    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    cursor:
        pointer;
}


.gif-library-card:hover,
.gif-library-card.selected {
    border-color:
        rgba(
            40,
            231,
            255,
            0.38
        );

    box-shadow:
        0 0 22px
        rgba(
            40,
            231,
            255,
            0.08
        );
}


.gif-library-card.inactive {
    opacity:
        0.48;
}


.gif-library-card img {
    display:
        block;

    width:
        100%;

    aspect-ratio:
        1.35;

    object-fit:
        cover;

    background:
        #020306;
}


.gif-library-card-copy {
    padding:
        8px;
}


.gif-library-card-copy strong {
    display:
        block;

    overflow:
        hidden;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    font-size:
        0.63rem;
}


.gif-library-card-copy small {
    display:
        block;

    margin-top:
        4px;

    color:
        var(
            --muted
        );

    font-size:
        0.53rem;
}


.gif-library-status {
    position:
        absolute;

    top:
        7px;

    right:
        7px;

    padding:
        4px
        6px;

    border-radius:
        999px;

    color:
        var(
            --green
        );

    background:
        rgba(
            5,
            8,
            12,
            0.9
        );

    font-size:
        0.48rem;

    font-weight:
        900;
}


.gif-library-card.inactive
.gif-library-status {
    color:
        var(
            --red
        );
}


.gif-library-inspector {
    padding:
        12px;
}


.gif-library-inspector-image {
    width:
        100%;

    max-height:
        220px;

    object-fit:
        contain;

    border-radius:
        14px;

    background:
        #020306;
}


.gif-library-inspector h3 {
    margin:
        12px 0
        4px;

    font-size:
        0.9rem;
}


.gif-library-inspector-meta {
    display:
        grid;

    gap:
        7px;

    margin-top:
        12px;
}


.gif-library-inspector-meta div {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        8px;

    border-radius:
        9px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    font-size:
        0.57rem;
}


.gif-library-inspector-meta span {
    color:
        var(
            --muted
        );
}



/* ==========================================================
   SOC STATUS + TWINK UX V2 2026-08-12
   COMPACT SHIFT STATUS MENU
========================================================== */

.moderator-menu {
    width: 330px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    padding: 9px;
    max-height: min(430px, calc(100vh - 92px));
    overflow-y: auto;
}

.moderator-menu-title,
.moderator-menu hr,
.moderator-menu .danger-menu-item {
    grid-column: 1 / -1;
}

.moderator-menu button {
    min-height: 44px;
    padding: 7px 8px;
    gap: 8px;
}

.moderator-menu button > span strong {
    font-size: .65rem;
}

.moderator-menu button > span small {
    margin-top: 1px;
    font-size: .48rem;
    line-height: 1.25;
}

.moderator-menu hr {
    margin: 2px 0;
}

@media (max-width: 720px) {
    .moderator-menu {
        position: fixed;
        top: 72px;
        right: 10px;
        width: min(330px, calc(100vw - 20px));
    }
}

/* ==========================================================
   SOC SHIFT STATUS CLICK FIX V3 2026-08-12
   De command bar vormt door backdrop-filter een eigen stacking
   context. Zet die expliciet boven de Mission Deck zodat het
   statusmenu zelf alle pointer-events ontvangt en niet meer
   door-klikt naar GB MEMBERS of andere dashboardkaarten.
========================================================== */

.command-bar {
    position: relative;
    z-index: 500;
    overflow: visible;
}

.command-actions {
    position: relative;
    z-index: 510;
}

.moderator-control {
    position: relative;
    z-index: 520;
}

.moderator-menu {
    z-index: 530;
    pointer-events: auto;
    isolation: isolate;
    background: rgb(10, 12, 19);
    border-color: rgba(40, 231, 255, 0.20);
    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.025);
}

.moderator-menu[hidden] {
    display: none;
    pointer-events: none;
}

.moderator-menu button,
.moderator-menu .danger-menu-item {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

.mission-nav,
.mission-main {
    position: relative;
    z-index: 1;
}