.site-header {
    height: 64px;
    border-bottom: 1px solid rgba(214, 221, 231, .9);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 20px rgba(35, 49, 73, .06);
    color: var(--text);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px)
}

.site-header .topbar-inner {
    gap: 22px;
    height: 100%
}

.site-header .brand {
    flex: none;
    gap: 9px;
    color: var(--text);
    letter-spacing: -.35px
}

.site-header .brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(145deg, #4387ff, #145bdd);
    box-shadow: 0 6px 16px rgba(23, 105, 255, .23);
    color: #fff;
    letter-spacing: .3px
}

.site-header .main-nav {
    display: flex;
    flex: none;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid #e6eaf0;
    border-radius: 11px;
    background: #f5f7fa
}

.site-header .main-nav a {
    padding: 8px 12px;
    border-radius: 8px;
    color: #566171;
    font-size: 13px;
    font-weight: 650;
    opacity: 1;
    transition: background .16s, color .16s, box-shadow .16s
}

.site-header .main-nav a:hover {
    background: #fff;
    color: var(--blue)
}

.site-header .main-nav a.active {
    background: #fff;
    box-shadow: 0 2px 8px rgba(32, 48, 75, .09);
    color: var(--blue)
}

.site-header .top-actions {
    flex: 1;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0
}

.site-header .top-actions > a,
.site-header .top-actions .link-btn {
    min-height: 36px;
    padding: 0 9px;
    border-radius: 8px;
    color: #4d5867;
    font-size: 12px;
    font-weight: 650;
    opacity: 1;
    white-space: nowrap;
    transition: background .16s, color .16s, border-color .16s
}

.site-header .top-actions > a:not(.btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.site-header .top-actions > a:not(.btn):hover,
.site-header .header-logout:hover {
    background: #f1f5fb;
    color: var(--blue)
}

.site-header .header-icon-action {
    gap: 6px
}

.site-header .header-icon-action svg {
    color: #667588
}

.site-header .header-admin-action {
    background: #f3efff;
    color: #7046b3 !important
}

.site-header .header-profile-action {
    max-width: 145px;
    overflow: hidden;
    background: var(--blue-soft);
    color: #245ba9 !important;
    text-overflow: ellipsis
}

.site-header .header-logout-form {
    margin: 0
}

.site-header .header-logout {
    min-height: 36px;
    color: #7a8492
}

.site-header .header-login-link {
    color: #3f4c5d !important
}

.site-header .header-register-link {
    border-color: #d5ddea;
    background: #fff;
    color: #315f9f;
    box-shadow: none
}

.site-header .header-register-link:hover {
    border-color: #a9c4f5;
    background: var(--blue-soft)
}

.site-header .header-create-link {
    min-height: 36px;
    padding-inline: 14px;
    border-radius: 9px;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(23, 105, 255, .2)
}

.site-header .nav-count {
    min-width: 19px;
    height: 19px;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(242, 75, 67, .25)
}

@media (max-width: 1080px) {
    .site-header .main-nav {
        display: none
    }
}

@media (max-width: 760px) {
    .site-header {
        min-height: 60px;
        height: 60px
    }

    .site-header .topbar-inner {
        gap: 7px
    }

    .site-header .brand {
        margin-right: auto
    }

    .site-header .top-actions {
        flex: none;
        margin-left: 0;
        gap: 5px
    }

    .site-header .top-actions > a:not(.btn),
    .site-header .top-actions form {
        display: none
    }

    .site-header .top-actions > a.chat-nav-link,
    .site-header .top-actions > a.header-login-link {
        display: inline-flex
    }

    .site-header .chat-nav-link {
        width: 38px;
        padding: 0
    }

    .site-header .chat-nav-link > span {
        display: none
    }

    .site-header .chat-nav-link .nav-count {
        position: absolute;
        top: -1px;
        right: -1px
    }

    .site-header .header-create-link {
        min-height: 36px;
        padding-inline: 10px
    }
}

@media (max-width: 560px) {
    .site-header .header-register-link {
        display: none
    }
}

@media (max-width: 480px) {
    .site-header .brand-name {
        display: none
    }

    .site-header .brand-mark {
        width: 34px;
        height: 34px
    }
}