:root {
    --nav-bg:#242120;
    --nav-bg-dark:#1b1918;
    --nav-border:rgba(255,255,255,.14);
    --nav-text:#fff;
    --nav-muted:rgba(255,255,255,.72);
}

.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:var(--nav-bg);
    color:var(--nav-text);
    box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.site-nav-shell {
    width:100%;
    min-height:64px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:9px 18px;
}

.site-brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
    color:var(--nav-text);
    font-size:16px;
    font-weight:600;
    letter-spacing:.01em;
}

.site-brand:hover { color:var(--nav-text); }

.site-brand img {
    width:42px;
    height:42px;
    object-fit:contain;
    border-radius:50%;
    background:#fff;
}

.site-nav-toggle {
    display:none;
    align-items:center;
    gap:8px;
    margin-left:auto;
    border:1px solid var(--nav-border);
    border-radius:999px;
    padding:8px 12px;
    background:transparent;
    color:var(--nav-text);
    font-weight:600;
    cursor:pointer;
}

.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
    background:rgba(255,255,255,.08);
    outline:none;
}

.site-nav-toggle-lines {
    width:18px;
    display:grid;
    gap:4px;
}

.site-nav-toggle-lines span {
    display:block;
    height:2px;
    border-radius:99px;
    background:currentColor;
}

.site-nav-panel {
    display:flex;
    align-items:center;
    gap:18px;
    flex:1 1 auto;
    min-width:0;
}

.site-nav-links {
    display:flex;
    align-items:center;
    gap:4px;
    flex:1 1 auto;
    min-width:0;
}

.site-nav-links a,
.site-nav-dropdown-toggle,
.site-account-link,
.site-logout button {
    min-height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    padding:7px 11px;
    color:var(--nav-text);
    background:transparent;
    border:0;
    font:inherit;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    cursor:pointer;
    white-space:nowrap;
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible,
.site-nav-dropdown-toggle:hover,
.site-nav-dropdown-toggle:focus-visible,
.site-account-link:hover,
.site-account-link:focus-visible {
    background:rgba(255,255,255,.10);
    color:var(--nav-text);
    outline:none;
}

.site-nav-dropdown {
    position:relative;
}

.site-nav-dropdown-toggle {
    gap:7px;
}

.site-nav-dropdown-menu {
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    min-width:190px;
    display:none;
    padding:7px;
    background:var(--nav-bg-dark);
    border:1px solid var(--nav-border);
    border-radius:14px;
    box-shadow:0 16px 36px rgba(0,0,0,.28);
}

.site-nav-dropdown.is-open .site-nav-dropdown-menu {
    display:grid;
    gap:3px;
}

.site-nav-dropdown-menu a {
    justify-content:flex-start;
    border-radius:10px;
    padding:8px 10px;
}

.site-nav-account {
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.site-logout { margin:0; }

.site-logout button {
    border:1px solid var(--nav-border);
    padding-inline:14px;
}

.site-logout button:hover,
.site-logout button:focus-visible {
    background:#fff;
    color:var(--nav-bg);
    outline:none;
}

@media (min-width:851px) {
    .site-nav-dropdown:hover .site-nav-dropdown-menu,
    .site-nav-dropdown:focus-within .site-nav-dropdown-menu {
        display:grid;
        gap:3px;
    }
}

@media (max-width:850px) {
    .site-nav-shell {
        min-height:58px;
        display:grid;
        grid-template-columns:auto auto;
        gap:10px;
        padding:9px 12px;
    }

    .site-brand span {
        display:none;
    }

    .site-brand img {
        width:38px;
        height:38px;
    }

    .site-nav-toggle {
        display:inline-flex;
        justify-self:end;
    }

    .site-nav-panel {
        grid-column:1 / -1;
        display:none;
        width:100%;
        padding:8px 0 3px;
        border-top:1px solid var(--nav-border);
    }

    .site-header.is-open .site-nav-panel {
        display:grid;
        gap:10px;
    }

    .site-nav-links,
    .site-nav-account {
        display:grid;
        gap:6px;
        width:100%;
    }

    .site-nav-links a,
    .site-nav-dropdown-toggle,
    .site-account-link,
    .site-logout button {
        width:100%;
        justify-content:space-between;
        min-height:40px;
        padding:9px 11px;
        border-radius:12px;
        background:rgba(255,255,255,.06);
    }

    .site-nav-dropdown {
        width:100%;
    }

    .site-nav-dropdown-menu {
        position:static;
        min-width:0;
        margin-top:6px;
        padding:6px;
        box-shadow:none;
        background:rgba(0,0,0,.16);
        border-color:var(--nav-border);
    }

    .site-nav-account {
        grid-template-columns:1fr 1fr;
        padding-top:2px;
    }

    .site-account-link {
        border:1px solid var(--nav-border);
    }

    .site-logout button {
        border-color:var(--nav-border);
    }
}