/* =====================================================
   ALFRED PRICE COMMAND — SHARED SIDEBAR
===================================================== */


/* =====================================================
   SIDEBAR LAYOUT
===================================================== */

.sidebar{
    position:fixed;

    left:0;
    top:0;
    bottom:0;

    width:var(--sidebar);

    z-index:20;

    display:flex;
    flex-direction:column;

    padding:
        20px
        14px
        16px;

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

    background:#070c14;
}


/* =====================================================
   BRAND
===================================================== */

.sidebar .brand{
    display:flex;
    align-items:center;

    gap:12px;

    padding:
        4px
        10px
        20px;
}


.sidebar .brand-mark-command{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    overflow:hidden;

    border:
        1px solid
        #438fe5;

    border-radius:12px;

    background:#102033;

    color:#72b7ff;
}


/* Remove old legacy slash logo */

.sidebar .brand-mark-command::before,
.sidebar .brand-mark-command::after{
    content:none;
}


.sidebar .brand-mark-command svg{
    width:25px;
    height:25px;

    display:block;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


.sidebar .brand-copy h1{
    margin:0;

    color:#ffffff;

    font-size:21px;
    font-weight:800;
    line-height:1;
}


.sidebar .brand-copy > span{
    display:block;

    margin-top:5px;

    color:#7990ad;

    font-size:10px;
}


/* =====================================================
   WORKSPACE LABEL
===================================================== */

.sidebar .nav-title{
    padding:
        12px
        12px
        8px;

    color:#536175;

    font-size:10px;

    letter-spacing:.15em;

    text-transform:uppercase;
}


/* =====================================================
   NAVIGATION
===================================================== */

.sidebar .nav{
    display:flex;
    flex-direction:column;

    gap:6px;
}


.sidebar .nav a{
    position:relative;

    min-height:48px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:
        8px
        10px;

    border:
        1px solid
        transparent;

    border-radius:11px;

    background:transparent;

    color:#94a0b3;

    text-decoration:none;

    font-size:13px;

    transition:
        background-color .16s ease,
        border-color .16s ease,
        color .16s ease;
}


.sidebar .nav a:hover{
    background:#0d1622;

    border-color:#192637;

    color:#dce7f7;
}


.sidebar .nav a.active{
    background:#102033;

    border-color:#2d5d8b;

    color:#ffffff;
}


.sidebar .nav a.active::before{
    content:"";

    position:absolute;

    left:0;

    width:3px;
    height:22px;

    border-radius:
        0
        3px
        3px
        0;

    background:#4da3ff;
}


/* =====================================================
   NAV ICON
===================================================== */

.sidebar .nav-icon{
    --icon-color:#9ccaff;
    --icon-bg:#0d1723;
    --icon-border:#36506d;

    width:32px;
    height:32px;

    flex:0 0 32px;

    display:grid;
    place-items:center;

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

    border-radius:9px;

    background:
        var(--icon-bg);

    color:
        var(--icon-color);

    font-size:0;
}


.sidebar .nav-icon svg{
    width:18px;
    height:18px;

    display:block;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =====================================================
   PAGE ICON COLOURS
===================================================== */

.sidebar .nav-icon-data{
    --icon-color:#55d8ff;
    --icon-bg:#09212c;
    --icon-border:#17576d;
}


.sidebar .nav-icon-workspace{
    --icon-color:#65aaff;
    --icon-bg:#0c1c31;
    --icon-border:#244e82;
}


.sidebar .nav-icon-customer{
    --icon-color:#54e4ad;
    --icon-bg:#0a211b;
    --icon-border:#1a654e;
}


.sidebar .nav-icon-history{
    --icon-color:#ad91ff;
    --icon-bg:#1b1530;
    --icon-border:#594690;
}


.sidebar .nav-icon-command{
    --icon-color:#ffd05f;
    --icon-bg:#251d0d;
    --icon-border:#72551d;
}


.sidebar .nav-icon-settings{
    --icon-color:#8fa8c8;
    --icon-bg:#111b28;
    --icon-border:#34475e;
}


.sidebar .nav a:hover .nav-icon,
.sidebar .nav a.active .nav-icon{
    border-color:
        var(--icon-color);
}


/* =====================================================
   BOTTOM STATUS
===================================================== */

.sidebar .sidebar-bottom{
    margin-top:auto;

    padding:
        12px
        10px
        4px;
}


.sidebar .system-pill{
    display:flex;
    align-items:center;

    gap:9px;

    padding:11px;

    border:
        1px solid
        #1a2a3b;

    border-radius:12px;

    background:#0a111b;

    color:#aeb8c6;

    font-size:11px;
}


.sidebar .system-pill b{
    display:block;

    color:#dce6f2;

    font-size:11px;
}


.sidebar .system-pill small{
    display:block;

    margin-top:2px;

    color:#647387;

    font-size:10px;
}


.sidebar .system-dot{
    width:8px;
    height:8px;

    flex:0 0 8px;

    border-radius:50%;

    background:var(--green);
}


/* =====================================================
   NARROW SCREEN
===================================================== */

@media(max-width:800px){

    .sidebar .brand-copy,
    .sidebar .nav-title,
    .sidebar .sidebar-bottom,
    .sidebar .nav a > span:not(.nav-icon){
        display:none;
    }


    .sidebar .brand{
        justify-content:center;

        padding-left:0;
        padding-right:0;
    }


    .sidebar .nav a{
        justify-content:center;

        padding:8px;
    }
}

/* =====================================================
   ALFRED SIDEBAR — COLLAPSE / TOP ICON MODE
===================================================== */


/* -----------------------------------------------------
   Smooth main layout expansion
----------------------------------------------------- */

.app{

    transition:
        grid-template-columns
        .38s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


/* -----------------------------------------------------
   Sidebar transition
----------------------------------------------------- */

.sidebar{

    overflow:
        visible;

    transition:
        width
        .38s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        padding
        .38s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        border-color
        .25s ease,

        background-color
        .25s ease;
}


/* =====================================================
   COLLAPSE BUTTON
===================================================== */

.sidebar-collapse-toggle{

    appearance:none;

    position:fixed;

    top:50%;

    transform:
        translateY(-50%);

    left:
        calc(
            var(--sidebar)
            - 15px
        );

    z-index:80;

    width:30px;
    height:30px;

    padding:0;

    display:grid;
    place-items:center;

    border:
        1px solid
        #315778;

    border-radius:
        999px;

    background:
        #0a1521;

    color:
        #82bfff;

    cursor:pointer;

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

    transition:
        left .38s
        cubic-bezier(.22,1,.36,1),

        top .38s
        cubic-bezier(.22,1,.36,1),

        background-color .18s ease,

        border-color .18s ease,

        color .18s ease,

        transform .18s ease;
}


.sidebar-collapse-toggle:hover{

    color:#ffffff;

    border-color:#62adf7;

    background:#10263b;

    transform:
        translateY(-50%)
        scale(1.06);
}

.sidebar-collapse-toggle svg{

    width:
        18px;

    height:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform
        .38s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


/* =====================================================
   COLLAPSED LAYOUT
===================================================== */

body.sidebar-collapsed
.app{

    grid-template-columns:
        0
        minmax(0,1fr) !important;
}


body.sidebar-collapsed
.sidebar{

    width:
        0 !important;

    padding-left:
        0 !important;

    padding-right:
        0 !important;

    border-right-color:
        transparent !important;

    background:
        transparent !important;

    backdrop-filter:
        none !important;
}


/* =====================================================
   HIDE NORMAL SIDEBAR CONTENT
===================================================== */

body.sidebar-collapsed
.sidebar
.brand,

body.sidebar-collapsed
.sidebar
.nav-title,

body.sidebar-collapsed
.sidebar
.sidebar-bottom{

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateX(-24px);

    transition:
        opacity .18s ease,
        transform .28s ease,
        visibility .18s ease;
}


/* =====================================================
   MOVE NAVIGATION INTO TOP EMPTY BAR
===================================================== */

body.sidebar-collapsed
.sidebar
.nav{

    position:
        fixed !important;

    left:
        50%;

    top:
        0;

    z-index:
        75;

    width:
        max-content;

    height:
        64px;

    display:
        flex !important;

    flex-direction:
        row !important;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px !important;

    padding:
        0;

    margin:
        0;

    overflow:
        visible;

    transform:
        translateX(-50%);
}

/* =====================================================
   ICON-ONLY TOP NAV BUTTONS
===================================================== */

body.sidebar-collapsed
.sidebar
.nav
a{

    width:
        48px;

    height:
        48px;

    min-height:
        48px !important;

    flex:
        0 0 48px;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center !important;

    padding:
        4px !important;

    margin:
        0;

    gap:
        0 !important;

    border:
        1px solid
        transparent;

    border-radius:
        11px;

    background:
        transparent;

    box-shadow:
        none;

    opacity:
        0;

    animation:
        sidebarTopIconIn
        .46s
        cubic-bezier(
            .22,
            1,
            .36,
            1
        )
        forwards;
}

/* =====================================================
   COLLAPSED NAV — ICON HOVER EXPANSION
===================================================== */

body.sidebar-collapsed
.sidebar
.nav
a:hover{

    width:205px;

    flex-basis:205px;

    justify-content:
        flex-start !important;

    gap:
        9px !important;

    padding:
        4px
        10px !important;

    z-index:100;

    background:
        #0c1723;

    border-color:
        #29435f;
}


body.sidebar-collapsed
.sidebar
.nav
a:hover
> span:not(.nav-icon){

    max-width:
        160px;

    opacity:
        1;

    margin-left:
        2px;

    transform:
        translateX(0);
}
/* Hide page names — icon only */

/* Collapsed page names — revealed on hover */

body.sidebar-collapsed
.sidebar
.nav
a
> span:not(.nav-icon){

    display:block !important;

    max-width:0;

    opacity:0;

    overflow:hidden;

    white-space:nowrap;

    margin-left:0;

    color:#e7f1ff;

    font-size:12px;

    transform:
        translateX(-8px);

    transition:
        max-width .28s
        cubic-bezier(.22,1,.36,1),

        opacity .18s ease,

        margin-left .28s
        cubic-bezier(.22,1,.36,1),

        transform .28s
        cubic-bezier(.22,1,.36,1);
}

/* Keep the actual icon perfectly centred */
body.sidebar-collapsed
.sidebar
.nav
a{

    overflow:hidden;

    transition:
        width .30s cubic-bezier(.22,1,.36,1),
        flex-basis .30s cubic-bezier(.22,1,.36,1),
        background-color .18s ease,
        border-color .18s ease;
}


body.sidebar-collapsed
.sidebar
.nav
a:hover{

    width:205px;

    flex-basis:205px;

    justify-content:
        flex-start !important;

    gap:
        9px !important;

    padding:
        4px 10px !important;

    z-index:100;

    background:#0c1723;

    border-color:#29435f;
}


body.sidebar-collapsed
.sidebar
.nav
a:hover
> span:not(.nav-icon){

    max-width:160px;

    opacity:1;

    margin-left:2px;

    transform:
        translateX(0);
}
body.sidebar-collapsed
.sidebar
.nav-icon{

    margin:
        0 !important;
}


/* Remove vertical active stripe in top mode */

body.sidebar-collapsed
.sidebar
.nav
a.active::before{

    display:
        none !important;
}


/* Active icon still clearly visible */

body.sidebar-collapsed
.sidebar
.nav
a.active{

    background:
        rgba(
            77,
            163,
            255,
            .08
        );

    border-color:
        rgba(
            77,
            163,
            255,
            .22
        );
}


/* =====================================================
   LEFT → RIGHT STAGGER
===================================================== */

body.sidebar-collapsed
.sidebar
.nav
a:nth-child(1){

    animation-delay:
        .03s;
}


body.sidebar-collapsed
.sidebar
.nav
a:nth-child(2){

    animation-delay:
        .08s;
}


body.sidebar-collapsed
.sidebar
.nav
a:nth-child(3){

    animation-delay:
        .13s;
}


body.sidebar-collapsed
.sidebar
.nav
a:nth-child(4){

    animation-delay:
        .18s;
}


body.sidebar-collapsed
.sidebar
.nav
a:nth-child(5){

    animation-delay:
        .23s;
}


body.sidebar-collapsed
.sidebar
.nav
a:nth-child(6){

    animation-delay:
        .28s;
}


@keyframes sidebarTopIconIn{

    from{

        opacity:
            0;

        transform:
            translateX(-26px)
            scale(.88);
    }


    to{

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);
    }
}


/* =====================================================
   COLLAPSED TOGGLE POSITION
===================================================== */

body.sidebar-collapsed
.sidebar-collapse-toggle{

    left:16px;

    top:50%;

    width:34px;

    height:34px;

    transform:
        translateY(-50%);
}

body.sidebar-collapsed
.sidebar-collapse-toggle
svg{

    transform:
        rotate(180deg);
}


/* =====================================================
   DON'T USE COLLAPSE MODE ON SMALL MOBILE
===================================================== */

@media(max-width:800px){

    .sidebar-collapse-toggle{

        display:
            none;
    }
}

/* =====================================================
   ALFRED BRAND — PREMIUM ANIMATED COMMAND MARK
===================================================== */

.sidebar
.brand-mark-command{

    position:relative;

    isolation:isolate;

    overflow:hidden;

    border:
        1px solid
        rgba(
            103,
            182,
            255,
            .78
        );

    background:
        radial-gradient(
            circle at 35% 28%,
            #1d5584 0%,
            #102c49 34%,
            #091a2a 72%,
            #07131f 100%
        );

    color:
        #9bd2ff;

    box-shadow:
        0 0 0 1px
        rgba(
            91,
            174,
            255,
            .08
        ),

        0 0 18px
        rgba(
            62,
            154,
            255,
            .18
        ),

        inset 0 0 16px
        rgba(
            61,
            157,
            255,
            .08
        );

    animation:
        alfredBrandBreath
        3.4s
        ease-in-out
        infinite;
}


/* moving light through logo */

.sidebar
.brand-mark-command::before{

    content:"";

    display:block;

    position:absolute;

    z-index:0;

    top:-25%;

    left:-80%;

    width:55%;
    height:150%;

    background:
        linear-gradient(
            100deg,
            transparent 0%,
            rgba(
                139,
                211,
                255,
                .04
            ) 20%,
            rgba(
                171,
                224,
                255,
                .34
            ) 50%,
            rgba(
                139,
                211,
                255,
                .04
            ) 80%,
            transparent 100%
        );

    transform:
        skewX(-17deg);

    animation:
        alfredBrandSweep
        4s
        ease-in-out
        infinite;

    pointer-events:none;
}


/* inner energy ring */

.sidebar
.brand-mark-command::after{

    content:"";

    display:block;

    position:absolute;

    z-index:0;

    inset:5px;

    border:
        1px solid
        rgba(
            116,
            197,
            255,
            .16
        );

    border-radius:
        8px;

    box-shadow:
        inset
        0
        0
        11px
        rgba(
            84,
            176,
            255,
            .08
        );

    pointer-events:none;
}


/* actual logo SVG */

.sidebar
.brand-mark-command svg{

    position:relative;

    z-index:2;

    filter:
        drop-shadow(
            0
            0
            4px
            rgba(
                110,
                198,
                255,
                .46
            )
        );

    animation:
        alfredSymbolPulse
        3.4s
        ease-in-out
        infinite;
}


/* subtle Alfred text treatment */

.sidebar
.brand-copy h1{

    text-shadow:
        0
        0
        14px
        rgba(
            77,
            163,
            255,
            .13
        );
}


/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes alfredBrandBreath{

    0%,
    100%{

        border-color:
            rgba(
                103,
                182,
                255,
                .62
            );

        box-shadow:
            0 0 0 1px
            rgba(
                91,
                174,
                255,
                .06
            ),

            0 0 14px
            rgba(
                62,
                154,
                255,
                .12
            ),

            inset 0 0 14px
            rgba(
                61,
                157,
                255,
                .07
            );
    }


    50%{

        border-color:
            rgba(
                129,
                203,
                255,
                .96
            );

        box-shadow:
            0 0 0 1px
            rgba(
                91,
                174,
                255,
                .12
            ),

            0 0 26px
            rgba(
                62,
                154,
                255,
                .30
            ),

            inset 0 0 21px
            rgba(
                61,
                157,
                255,
                .13
            );
    }
}


@keyframes alfredBrandSweep{

    0%,
    55%{

        left:-80%;
    }


    85%,
    100%{

        left:135%;
    }
}



body.sidebar-collapsed
.sidebar
.nav-icon{

    width:
        36px !important;

    height:
        36px !important;

    flex:
        0 0 36px !important;

    border-radius:
        10px !important;
}


body.sidebar-collapsed
.sidebar
.nav-icon
svg{

    width:
        20px !important;

    height:
        20px !important;
}

/* =====================================================
   COLLAPSED NAV — PAGE CHANGE / EXPAND BEHAVIOUR
===================================================== */


/* -----------------------------------------------------
   Page navigation while collapsed:
   do NOT replay the entrance animation
----------------------------------------------------- */

body.sidebar-collapsed.sidebar-no-entry-animation
.sidebar
.nav
a{

    animation:
        none !important;

    opacity:
        1 !important;

    transform:
        none !important;
}


/* -----------------------------------------------------
   Expanding sidebar:
   icons leave toward LEFT first
----------------------------------------------------- */

body.sidebar-returning
.sidebar
.nav
a{

    animation:
        sidebarTopIconExit
        .26s
        cubic-bezier(
            .4,
            0,
            1,
            1
        )
        forwards !important;
}


/* Slight sequential exit */

body.sidebar-returning
.sidebar
.nav
a:nth-child(1){

    animation-delay:
        0s !important;
}


body.sidebar-returning
.sidebar
.nav
a:nth-child(2){

    animation-delay:
        .018s !important;
}


body.sidebar-returning
.sidebar
.nav
a:nth-child(3){

    animation-delay:
        .036s !important;
}


body.sidebar-returning
.sidebar
.nav
a:nth-child(4){

    animation-delay:
        .054s !important;
}


body.sidebar-returning
.sidebar
.nav
a:nth-child(5){

    animation-delay:
        .072s !important;
}


body.sidebar-returning
.sidebar
.nav
a:nth-child(6){

    animation-delay:
        .09s !important;
}


@keyframes sidebarTopIconExit{

    from{

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);
    }


    to{

        opacity:
            0;

        transform:
            translateX(-42px)
            scale(.88);
    }
}

body.sidebar-collapsed.sidebar-no-entry-animation
.sidebar
.nav
a{

    animation:
        none !important;

    opacity:
        1 !important;

    transform:
        none !important;
}

/* =====================================================
   COLLAPSED NAV — PAGE CHANGE / EXPAND BEHAVIOUR
===================================================== */


/* -----------------------------------------------------
   Page navigation while collapsed:
   do NOT replay the entrance animation
----------------------------------------------------- */

body.sidebar-collapsed
.sidebar-no-entry-animation
.sidebar
.nav
a,





/* =====================================================
   SIDEBAR EXPAND — TEXT FADE INvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
===================================================== */

body.sidebar-expanding
.sidebar
.brand-copy,

body.sidebar-expanding
.sidebar
.nav-title,

body.sidebar-expanding
.sidebar
.nav
a
> span:not(.nav-icon),

body.sidebar-expanding
.sidebar
.sidebar-bottom{

    animation:
        sidebarTextReturn
        .42s
        cubic-bezier(.22,1,.36,1)
        both;
}


body.sidebar-expanding
.sidebar
.nav
a:nth-child(1)
> span:not(.nav-icon){
    animation-delay:.03s;
}

body.sidebar-expanding
.sidebar
.nav
a:nth-child(2)
> span:not(.nav-icon){
    animation-delay:.06s;
}

body.sidebar-expanding
.sidebar
.nav
a:nth-child(3)
> span:not(.nav-icon){
    animation-delay:.09s;
}

body.sidebar-expanding
.sidebar
.nav
a:nth-child(4)
> span:not(.nav-icon){
    animation-delay:.12s;
}

body.sidebar-expanding
.sidebar
.nav
a:nth-child(5)
> span:not(.nav-icon){
    animation-delay:.15s;
}

body.sidebar-expanding
.sidebar
.nav
a:nth-child(6)
> span:not(.nav-icon){
    animation-delay:.18s;
}


@keyframes sidebarTextReturn{

    from{
        opacity:0;

        transform:
            translateX(-12px);
    }

    to{
        opacity:1;

        transform:
            translateX(0);
    }
}

/* =====================================================
   SIDEBAR EXPAND — TEXT RETURN ANIMATION
===================================================== */

body.sidebar-expanding
.sidebar
.brand-copy,

body.sidebar-expanding
.sidebar
.nav-title,

body.sidebar-expanding
.sidebar
.nav
a
> span:not(.nav-icon),

body.sidebar-expanding
.sidebar
.sidebar-bottom{

    animation:
        sidebarTextReturn
        .42s
        cubic-bezier(.22,1,.36,1)
        both;
}


/* Slight stagger on page names */

body.sidebar-expanding
.sidebar
.nav
a:nth-child(1)
> span:not(.nav-icon){

    animation-delay:.03s;
}


body.sidebar-expanding
.sidebar
.nav
a:nth-child(2)
> span:not(.nav-icon){

    animation-delay:.06s;
}


body.sidebar-expanding
.sidebar
.nav
a:nth-child(3)
> span:not(.nav-icon){

    animation-delay:.09s;
}


body.sidebar-expanding
.sidebar
.nav
a:nth-child(4)
> span:not(.nav-icon){

    animation-delay:.12s;
}


body.sidebar-expanding
.sidebar
.nav
a:nth-child(5)
> span:not(.nav-icon){

    animation-delay:.15s;
}


body.sidebar-expanding
.sidebar
.nav
a:nth-child(6)
> span:not(.nav-icon){

    animation-delay:.18s;
}


@keyframes sidebarTextReturn{

    from{

        opacity:0;

        transform:
            translateX(-12px);
    }


    to{

        opacity:1;

        transform:
            translateX(0);
    }
}
/* All workspaces retain their expanded-sidebar content width. */
@media (min-width: 801px) {
  .app > .main > .content {
    width: 100%;
    max-width: min(var(--expanded-content-max, 1650px), calc(100vw - var(--sidebar)));
    margin-left: auto;
    margin-right: auto;
  }
}

/* Compact command emblem: a glass face, travelling perimeter and live signal. */
.sidebar .brand .brand-mark-command{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
    border-color:rgba(104,187,255,.5) !important;
    background:radial-gradient(circle at 25% 15%,#244767,#0b1828 65%,#060e18) !important;
    box-shadow:inset 0 1px 0 rgba(198,233,255,.18),0 0 18px rgba(56,151,235,.15) !important;
    animation:commandEmblemGlow 5s ease-in-out infinite;
}
.sidebar .brand .brand-mark-command svg.command-app-emblem{
    width:40px !important;
    height:40px !important;
    stroke-width:1.3 !important;
    animation:none !important;
    transform:none !important;
}
.sidebar .brand .command-app-emblem .command-emblem-frame{
    stroke:#33566e !important;
    opacity:.6;
}
.sidebar .brand .command-app-emblem .command-emblem-orbit{
    stroke:#80dfff !important;
    stroke-dasharray:18 105;
    animation:commandEmblemOrbit 6s linear infinite;
    filter:drop-shadow(0 0 3px #49c7ff);
}
.sidebar .brand .command-app-emblem .command-emblem-glyph{
    stroke:#d7ebff !important;
    stroke-width:2 !important;
}
.sidebar .brand .command-app-emblem .command-emblem-signal{
    stroke:#ffc968 !important;
    stroke-dasharray:24;
    animation:commandEmblemSignal 5s ease-in-out infinite;
}
.sidebar .brand .command-app-emblem .command-emblem-node{
    stroke:#ffe4a7 !important;
    fill:#ffe4a7 !important;
    filter:drop-shadow(0 0 2px #ffd166);
}
body.sidebar-collapsed .sidebar .brand{
    position:fixed;
    top:6px;
    left:20px;
    width:auto;
    height:52px;
    padding:0 !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    pointer-events:auto;
    z-index:76;
}
body.sidebar-collapsed .sidebar .brand-copy{
    display:block !important;
}
body.sidebar-collapsed .sidebar .brand-copy h1{
    display:block !important;
    font-size:17px !important;
    font-weight:750 !important;
    line-height:1.2 !important;
    white-space:nowrap;
    letter-spacing:-.025em;
    color:#dcecff !important;
}
body.sidebar-collapsed .sidebar .brand .brand-mark-command{
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
    border-radius:15px !important;
}
body.sidebar-collapsed .sidebar .brand .command-app-emblem{
    width:48px !important;
    height:48px !important;
}
body.sidebar-collapsed .sidebar .nav a{
    width:56px;
    height:56px;
    min-height:56px !important;
    flex-basis:56px;
}
body.sidebar-collapsed .sidebar .nav a:hover{
    width:205px;
    flex-basis:205px;
}
body.sidebar-collapsed .sidebar .nav .nav-icon{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
}
body.sidebar-collapsed .sidebar .nav .nav-icon svg{
    width:27px !important;
    height:27px !important;
}
@media(min-width:801px) and (max-width:1200px){
    body.sidebar-collapsed .sidebar .brand{left:12px;gap:9px !important}
    body.sidebar-collapsed .sidebar .brand-copy h1{
        max-width:125px;
        white-space:normal;
        font-size:15px !important;
    }
    body.sidebar-collapsed .sidebar .nav{gap:5px !important}
}
@keyframes commandEmblemOrbit{to{stroke-dashoffset:-123}}
@keyframes commandEmblemSignal{
    0%,100%{stroke-dashoffset:0;opacity:.9}
    45%{stroke-dashoffset:24;opacity:.35}
    70%{stroke-dashoffset:0;opacity:1}
}
@keyframes commandEmblemGlow{
    0%,100%{filter:drop-shadow(0 0 2px rgba(73,173,255,.12))}
    50%{filter:drop-shadow(0 0 7px rgba(73,173,255,.3))}
}
@media(prefers-reduced-motion:reduce){
    .sidebar .brand .brand-mark-command,
    .sidebar .brand .command-app-emblem *{animation:none !important}
}