/*
==========================================================
UET HEADER
==========================================================
*/

#uet-header{

    position:sticky;
    top:0;
    z-index:9999;

    height:88px;

    background:
        linear-gradient(
            180deg,
            rgba(15,18,28,.96),
            rgba(11,14,20,.92)
        );

    backdrop-filter:blur(22px);

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.35);

}

/*
==========================================================
INNER
==========================================================
*/

.uet-header-inner{

    width:min(1800px,96%);
    height:100%;

    margin:auto;

    display:grid;

    grid-template-columns:

        1fr
        auto
        1fr;

    align-items:center;

    gap:30px;

}

/*
==========================================================
LEFT
==========================================================
*/

.uet-header-left{

    display:flex;

    align-items:center;

    justify-content:flex-start;

}

/*
Desktop intentionally empty.

Hub already contains logo.

*/

.uet-header-brand{

    display:none;

}

/*
==========================================================
CENTRE
==========================================================
*/

.uet-header-centre{

    display:flex;

    justify-content:center;

}

/*
==========================================================
PREMIUM NAV SHELL
==========================================================
*/

.uet-header-nav{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px;

    border-radius:999px;

    background:

        linear-gradient(

            135deg,

            rgba(0,174,239,.14),

            rgba(255,45,120,.12)

        );

    border:

        1px solid rgba(255,255,255,.06);

    box-shadow:

        0 0 40px rgba(0,174,239,.10);

}

/*
==========================================================
BUTTONS
==========================================================
*/

.uet-header-button{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:999px;

    text-decoration:none;

    color:#FFFFFF;

    font-weight:700;

    transition:.30s;

}

.uet-header-button:hover{

    background:

        linear-gradient(

            90deg,

            rgba(0,174,239,.22),

            rgba(255,45,120,.18)

        );

    transform:translateY(-2px);

    box-shadow:

        0 0 18px rgba(0,174,239,.18);

}

.uet-header-text{

    white-space:nowrap;

    font-size:15px;

}

/*
==========================================================
RIGHT
==========================================================
*/

.uet-header-right{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:16px;

}
/*
==========================================================
HEADER TOOLS
==========================================================
*/

.uet-header-tools{

    display:flex;

    align-items:center;

    gap:14px;

}

/*
==========================================================
ICON BUTTONS
==========================================================
*/

.uet-header-icon-button{

    position:relative;

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    cursor:pointer;

    border:none;

    border-radius:16px;

    color:#FFFFFF;

    background:

        linear-gradient(
            180deg,
            rgba(34,39,52,.95),
            rgba(23,26,35,.95)
        );

    border:1px solid rgba(255,255,255,.06);

    transition:

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

}

.uet-header-icon-button:hover{

    transform:translateY(-2px);

    background:

        linear-gradient(
            135deg,
            rgba(0,174,239,.35),
            rgba(255,45,120,.28)
        );

    box-shadow:

        0 0 25px rgba(0,174,239,.35);

}

.uet-header-icon-button svg{

    width:20px;
    height:20px;

}

/*
==========================================================
BADGE
==========================================================
*/

.uet-header-badge{

    position:absolute;

    top:-5px;
    right:-5px;

    width:20px;
    height:20px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(
            180deg,
            #FF5B9A,
            #FF2D78
        );

    color:#FFFFFF;

    font-size:10px;

    font-weight:700;

    box-shadow:

        0 0 16px rgba(255,45,120,.60);

}

/*
==========================================================
ACCOUNT BUTTON
==========================================================
*/

.uet-account-button{

    display:flex;

    align-items:center;

    gap:14px;

    padding:7px 18px 7px 8px;

    cursor:pointer;

    border:none;

    border-radius:999px;

    color:#FFFFFF;

    background:

        linear-gradient(
            180deg,
            rgba(34,39,52,.95),
            rgba(23,26,35,.95)
        );

    border:1px solid rgba(255,255,255,.06);

    transition:

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

}

.uet-account-button:hover{

    transform:translateY(-2px);

    background:

        linear-gradient(
            135deg,
            rgba(0,174,239,.18),
            rgba(255,45,120,.16)
        );

    box-shadow:

        0 0 22px rgba(0,174,239,.22);

}

.uet-account-avatar{

    display:flex;

}

.uet-account-avatar img{

    width:42px;
    height:42px;

    border-radius:50%;

    display:block;

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

}

.uet-account-name{

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

}

.uet-account-arrow{

    display:flex;

    align-items:center;

    color:#97A3B5;

    transition:.25s;

}

.uet-account-button:hover .uet-account-arrow{

    transform:rotate(180deg);

    color:#FFFFFF;

}
/*
==========================================================
SEARCH OVERLAY
==========================================================
*/

#uet-search-overlay{

    position:absolute;

    top:88px;

    right:180px;

    width:420px;

    padding:24px;

    background:#171A23;

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transform:translateY(-12px);

    transition:.25s;

    z-index:9999;

}

#uet-search-overlay.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}
/*
==========================================================
SEARCH INPUT
==========================================================
*/

.uet-search-input{

    width:100%;

    height:60px;

    padding:0 24px;

    border:none;

    border-radius:18px;

    background:#10141D;

    color:#FFFFFF;

    font-size:18px;

    outline:none;

    border:1px solid rgba(255,255,255,.06);

}

.uet-search-input:focus{

    border-color:#00AEEF;

    box-shadow:

        0 0 25px rgba(0,174,239,.30);

}
/*
==========================================================
SEARCH RESULTS
==========================================================
*/

.uet-search-results{

    margin-top:20px;

    min-height:180px;

    color:#9EA7B8;

}

/*
==========================================================
NOTIFICATION PANEL
==========================================================
*/

#uet-notification-panel{

    position:absolute;

    top:88px;

    right:110px;

    width:340px;

    padding:24px;

    background:#171A23;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 25px 60px rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transform:translateY(-12px);

    transition:.25s;

    z-index:9999;

}

#uet-notification-panel.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/*
==========================================================
ACCOUNT MENU
==========================================================
*/

#uet-account-menu{

    position:absolute;

    top:92px;

    right:20px;

    width:320px;

    overflow:hidden;

    border-radius:22px;

    background:

        linear-gradient(
            180deg,
            rgba(25,30,42,.98),
            rgba(18,22,32,.98)
        );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 30px 70px rgba(0,0,0,.55);

    opacity:0;
    visibility:hidden;

    transform:translateY(-12px);

    transition:.25s;

}

#uet-account-menu.active{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

#uet-account-menu a{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 24px;

    color:#FFFFFF;

    text-decoration:none;

    font-weight:600;

    transition:.20s;

}

#uet-account-menu a:hover{

    background:

        linear-gradient(
            90deg,
            rgba(0,174,239,.16),
            rgba(255,45,120,.14)
        );

}

#uet-account-menu svg{

    width:20px;

    height:20px;

}

#uet-account-menu hr{

    border:none;

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

    margin:8px 0;

}
.uet-search-header{

    margin-bottom:22px;

}

.uet-search-header h2{

    color:#FFF;

    font-size:24px;

    margin-bottom:6px;

}

.uet-search-header p{

    color:#8F99AD;

}

.uet-search-box{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    border-radius:18px;

    background:#10141D;

    border:1px solid rgba(255,255,255,.06);

}

.uet-search-box svg{

    width:22px;

    height:22px;

    color:#00AEEF;

}

.uet-search-input{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:#FFF;

    font-size:18px;

}

.uet-search-empty{

    padding:40px;

    text-align:center;

    color:#7C8799;

}