/* ==========================================================================
   ValueStats · Global frontend topbar
   ========================================================================== */

.site-topbar.header-gradient,
.site-topbar.header-scrolled {
    border-bottom: 1px solid rgba(148, 181, 165, .18);
    background:
        linear-gradient(90deg, rgba(52, 211, 153, .035), transparent 28%),
        #081c15;
    box-shadow: 0 4px 14px rgba(3, 14, 10, .16);
    backdrop-filter: blur(14px);
}

.site-topbar.header-gradient::before {
    opacity: .55;
    background: linear-gradient(90deg, #23b27d 0, rgba(35, 178, 125, .15) 34%, transparent 72%);
}

.site-topbar > .absolute.inset-x-0 {
    display: none;
}

.site-topbar > .topbar-shell {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.site-topbar .topbar-desktop-layout {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: .55rem;
}

.site-topbar .topbar-desktop-nav,
.site-topbar .topbar-desktop-actions {
    align-items: center;
}

@media (min-width: 1180px) {
    .site-topbar .topbar-row {
        display: grid !important;
        grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
        grid-template-rows: 3.5rem;
        align-items: center;
        column-gap: 1rem;
    }

    .site-topbar .topbar-logo {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
    }

    .site-topbar .topbar-desktop-layout {
        display: contents !important;
    }

    .site-topbar .topbar-desktop-nav {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        justify-self: center;
    }

    .site-topbar .topbar-desktop-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
    }
}

.site-topbar .topbar-wordmark {
    color: #f5faf7;
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -.045em;
}

.site-topbar .topbar-wordmark > span {
    color: #6ee7b7;
}

.site-topbar .nav-pill {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    padding: .42rem .68rem;
    border: 1px solid transparent;
    border-radius: .34rem;
    color: #b8c9c0;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .005em;
}

.site-topbar .nav-pill:hover {
    border-color: rgba(167, 243, 208, .13);
    color: #f4fbf7;
    background: rgba(255, 255, 255, .055);
}

.site-topbar .nav-icon-btn {
    display: inline-grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(207, 229, 218, .12);
    border-radius: .34rem;
    color: #b8c9c0;
    background: rgba(255, 255, 255, .025);
}

.site-topbar .nav-icon-btn:hover {
    border-color: rgba(110, 231, 183, .25);
    color: #a7f3d0;
    background: rgba(52, 211, 153, .07);
}

.site-topbar .nav-icon-btn.js-open-favs {
    color: #fcd34d;
}

.site-topbar .h-6.w-px {
    height: 1.45rem;
    margin-inline: .45rem;
    background: rgba(207, 229, 218, .14);
}

.site-topbar .topbar-user-button,
.site-topbar .topbar-auth-primary,
.site-topbar .topbar-admin-link {
    min-height: 2.15rem;
    padding: .42rem .62rem;
    border: 1px solid rgba(207, 229, 218, .12);
    border-radius: .34rem;
    color: #edf7f2;
    background: rgba(255, 255, 255, .025);
    box-shadow: none;
}

.site-topbar .topbar-user-button:hover,
.site-topbar .topbar-auth-primary:hover {
    border-color: rgba(110, 231, 183, .25);
    color: #fff;
    background: rgba(52, 211, 153, .07);
    box-shadow: none;
}

.site-topbar .topbar-user-button span {
    font-size: .8rem;
    font-weight: 650;
}

.site-topbar .topbar-auth-link {
    padding: .42rem .62rem;
    color: #b8c9c0;
    font-size: .8rem;
    font-weight: 650;
}

.site-topbar .topbar-auth-link:hover {
    color: #f4fbf7;
}

.site-topbar .topbar-auth-primary {
    display: inline-flex;
    align-items: center;
    border-color: rgba(110, 231, 183, .24);
    color: #eafff5;
    background: rgba(52, 211, 153, .1);
    font-size: .8rem;
    font-weight: 650;
}

.site-topbar .topbar-admin-link {
    border-color: rgba(248, 113, 113, .22);
    color: #fecaca;
    background: rgba(220, 38, 38, .1);
    font-size: .8rem;
    font-weight: 650;
}

.site-topbar .topbar-admin-link:hover {
    border-color: rgba(248, 113, 113, .35);
    color: #fff;
    background: rgba(220, 38, 38, .18);
}

.site-topbar .dropdown-menu,
.site-topbar .topbar-mobile-actions .absolute.right-0 {
    overflow: hidden;
    margin-top: .45rem;
    padding: .3rem;
    border: 1px solid #d6dfda;
    border-radius: .45rem;
    background: rgba(255, 255, 255, .99);
    box-shadow: 0 12px 28px rgba(3, 18, 13, .18);
    backdrop-filter: none;
}

.site-topbar .dropdown-item,
.site-topbar .topbar-mobile-actions .absolute.right-0 a {
    margin: 0;
    padding: .58rem .68rem;
    border-radius: .28rem;
    color: #405048;
    background: transparent;
    font-size: .78rem;
    font-weight: 650;
}

.site-topbar .dropdown-item:hover,
.site-topbar .topbar-mobile-actions .absolute.right-0 a:hover {
    color: #075f45;
    background: #eff6f2;
}

.site-topbar .dropdown-item.text-red-600,
.site-topbar .topbar-mobile-actions .absolute.right-0 a.text-red-600 {
    color: #b91c1c;
}

.site-topbar .topbar-mobile-actions > button,
.site-topbar .topbar-mobile-actions > div > button,
.site-topbar .topbar-mobile-login {
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid rgba(207, 229, 218, .12);
    border-radius: .34rem;
    color: #dcebe3;
    background: rgba(255, 255, 255, .025);
}

.site-topbar .topbar-mobile-actions > button:hover,
.site-topbar .topbar-mobile-actions > div > button:hover,
.site-topbar .topbar-mobile-login:hover {
    border-color: rgba(110, 231, 183, .25);
    color: #a7f3d0;
    background: rgba(52, 211, 153, .07);
}

.site-topbar .topbar-mobile-login {
    font-size: 0;
}

.site-topbar .topbar-mobile-login svg {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.site-topbar .topbar-mobile-quick-login {
    display: none;
}

@media (max-width: 767px) {
    .site-topbar .topbar-mobile-quick-login {
        display: inline-flex;
        min-height: 2.1rem;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        margin-left: auto;
        padding: .42rem .62rem;
        border: 1px solid rgba(110, 231, 183, .24);
        border-radius: .32rem;
        color: #eafff5;
        background: rgba(52, 211, 153, .1);
        font-size: .7rem;
        font-weight: 680;
        line-height: 1;
        white-space: nowrap;
    }

    .site-topbar .topbar-mobile-quick-login:hover,
    .site-topbar .topbar-mobile-quick-login:focus-visible {
        border-color: rgba(110, 231, 183, .4);
        color: #fff;
        background: rgba(52, 211, 153, .16);
    }

    .site-topbar .topbar-mobile-quick-login svg {
        width: .95rem;
        height: .95rem;
        flex: 0 0 auto;
    }
}

.site-topbar .topbar-mobile-menu {
    border-top: 1px solid rgba(207, 229, 218, .11);
}

.site-topbar .topbar-mobile-menu a,
.site-topbar .topbar-mobile-menu button {
    border-radius: .34rem;
    color: #d5e3dc;
    font-size: .82rem;
}

.site-topbar .topbar-mobile-menu a:hover,
.site-topbar .topbar-mobile-menu button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .055);
}

[data-theme="dark"] .site-topbar .dropdown-menu,
[data-theme="dark"] .site-topbar .topbar-mobile-actions .absolute.right-0 {
    border-color: #31463b;
    background: rgba(16, 29, 23, .99);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4);
}

[data-theme="dark"] .site-topbar .dropdown-item,
[data-theme="dark"] .site-topbar .topbar-mobile-actions .absolute.right-0 a {
    color: #c3d1ca;
}

[data-theme="dark"] .site-topbar .dropdown-item:hover,
[data-theme="dark"] .site-topbar .topbar-mobile-actions .absolute.right-0 a:hover {
    color: #8af0c1;
    background: #192c23;
}