@layer app {

    /* apps */

    flex[name="apps"] {
        position: absolute;
    }

    app {
        contain: style;
    }

    /* breadcrumbs */

    app[name="breadcrumbs"] {
        margin-block-start: calc(var(--bobr-space-min) - var(--bobr-space));
    }

    /* app[name=breadcrumbs] .wrap-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
} */

    app[name=breadcrumbs] .wrap-breadcrumbs .crumb {
        display: inline;
    }

    app[name=breadcrumbs] .wrap-breadcrumbs .item {
        color: var(--bobr-color-blue);
        font-weight: 700;
        text-decoration: none;
        transition: .15s;
    }

    app[name=breadcrumbs] .wrap-breadcrumbs .item:hover {
        color: var(--bobr-color-blue-hover);
    }

    app[name=breadcrumbs] .wrap-breadcrumbs .item:after {
        content: "";
        display: inline-block;
        width: 4px;
        height: 7px;
        margin-inline: 7px 6px;
        background-color: var(--bobr-color-gray-middle);
        mask-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 9'%3E%3Cpath d='m.664 1.5 3 3-3 3' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 9'%3E%3Cpath d='m.664 1.5 3 3-3 3' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        pointer-events: none;
        user-select: none;
        transition: .15s;
        vertical-align: .04em;
    }

    app[name=breadcrumbs] .wrap-breadcrumbs .item:empty:after {
        margin: 0;
        width: 0;
    }

    app[name=breadcrumbs] .wrap-breadcrumbs h1 {
        margin: 0;
        padding: 0;
        font-size: larger;
    }

    /* breadcrumbs */



    /* search */

    app[name=search] .wrap {
        position: relative;
    }

    app[name=search] .wrap-search {
        box-sizing: border-box;
        width: 100%;
        background-color: var(--component-input-bg);
        border-radius: var(--bobr-radius);
        min-height: 54px;
        position: relative;
        cursor: pointer;
        container-type: inline-size;
        z-index: 100;
        transition: background-color .15s .1s;
    }

    app[name=search] .wrap-search > bo-toggle.level {
        position: absolute;
        left: 6px;
        top: 25%;
        bottom: 25%;
        width: 6px;
        min-width: 0;
        height: auto;
        padding: 0;
        margin: 0;
        border-radius: var(--bobr-radius-max);
        cursor: pointer;
        opacity: 0;
        z-index: 3;
        transition: .15s transform, .15s background-color, .15s opacity;
    }

    app[name=search] .wrap-search > bo-toggle.level > .wrap-com,
    app[name=search] .wrap-search > bo-toggle.level > .wrap-com > .wrap-main,
    app[name=search] .wrap-search > bo-toggle.level .toggle {
        display: block;
        width: 100%;
        min-width: 0;
        height: 100%;
        margin: 0;
    }

    app[name=search] .wrap-search > bo-toggle.level .toggle {
        background-color: var(--bobr-color-blue);
        border-radius: var(--bobr-radius-max);
        transition: .15s transform, .15s background-color;
    }

    app[name=search] .wrap-search > bo-toggle.level .toggle::after {
        display: none;
    }

    app[name=search] .wrap-search > bo-toggle.level:hover .toggle {
        background-color: var(--bobr-color-blue-dark);
    }

    app[name=search] .wrap-search > bo-toggle.level:active {
        transform: scaleY(.8) !important;
        transition: 0s;
    }

    app[name=search] .wrap-search:focus-within > bo-toggle.level,
    app[name=search] .wrap-search > bo-toggle.level:active {
        opacity: 1;
    }

    app[name=search][data-level=strict] .wrap-search > bo-toggle.level .toggle {
        background-color: var(--bobr-color-green-deep);
    }

    app[name=search][data-mode=search] .wrap-search:focus-within {
        background-color: white;
        transition: background-color .15s;
    }

    app[name=search] .wrap-search bo-input.search-query {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    app[name=search] .wrap-search bo-input.search-query.focus {
        box-shadow: none;
        z-index: 0;
    }

    app[name=search] .wrap-search bo-input.search-query > .wrap-com {
        display: block;
    }

    app[name=search] .wrap-search bo-input.search-query :is(.wrap-com, .wrap-main, .wrap-input) {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    app[name=search] .wrap-search .input {
        display: block;
        width: 100%;
        height: 54px;
        min-width: 0;
        min-height: 54px;
        box-sizing: border-box;
        padding: 10px 228px 12px 18px;
        overflow: hidden;
        cursor: text;
        background-color: transparent;
        border-radius: var(--bobr-radius);
        font-size: 1.5em;
        font-weight: 300;
        transition: transform .15s;
    }

    app[name=search] .wrap-search .input:focus {
        background-color: transparent;
    }

    app[name=search] .wrap-search .input::placeholder,
    app[name=search] .wrap-search .input:focus::placeholder {
        color: var(--component-placeholder-text);
    }

    app[name="search"] .wrap-search .controls {
        display: flex;
        align-items: center;
        gap: var(--bobr-space-micro);
        position: absolute;
        right: 14px;
        top: 14px;
        min-width: 0;
        pointer-events: none;
        z-index: 3;
    }

    app[name='search'] .wrap-search:not(:focus-within) .input:not(:focus-within) {
        max-height: 54px;
        overflow: hidden;
    }

    app[name='search'] .wrap-search .controls> :is(bo-button, bo-toggle) {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        border-radius: var(--bobr-radius-min);
        cursor: pointer;
        min-height: 0;
        transform: translateX(-3px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity .15s, visibility .15s, transform .15s, background-color .15s;
        display: block;
    }

    app[name='search'] .wrap-search .controls> :is(bo-button, bo-toggle)>.wrap-com {
        display: block;
        gap: 0;
        margin: 0;
    }

    app[name='search'] .wrap-search .controls bo-button>.wrap-com>button {
        height: auto;
        padding: 4px 11px 9px;
        border-radius: var(--bobr-radius-min);
        font-size: 13.3px;
    }

    app[name='search'] .wrap-search .controls bo-button>.wrap-com>button::after {
        display: none;
    }

    app[name='search'] .wrap-search .controls bo-toggle.type .wrap-main,
    app[name='search'] .wrap-search .controls bo-toggle.type .toggle {
        width: auto;
        height: auto;
        margin: 0;
    }

    app[name='search'] .wrap-search .controls bo-toggle.type .states>div {
        display: flex;
        align-items: center;
    }

    app[name='search'] .wrap-search bo-button.clear>.wrap-com>button {
        background: var(--bobr-color-black-light);
    }

    app[name='search'] .wrap-search bo-button.clear:hover>.wrap-com>button {
        background: black;
    }

    app[name=search] .wrap-search .controls:active> :is(bo-button, bo-toggle),
    app[name=search] .wrap:focus-within .wrap-search bo-toggle.type,
    app[name=search] .wrap:focus-within .wrap-search:has(.input:not(:placeholder-shown)) bo-button.clear,
    app[name=search] .wrap:has(.input:not(:placeholder-shown)) :is(bo-toggle.type, bo-button.clear) {
        pointer-events: auto;
        visibility: visible;
        transform: none;
        opacity: 1;
    }

    app[name=search] .wrap-filter-result {
        top: calc(100% + var(--bobr-space-micro));
        left: 0px;
        right: 0px;
        position: absolute;
        user-select: none;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        height: min-content;
        min-height: 22px;
        gap: var(--bobr-space-micro);
        z-index: 99;
        transition: opacity .15s, visibility .15s, transform .15s;
        transform: translateY(-5px);
        opacity: 0;
        visibility: hidden;
        background: white;
        padding: var(--bobr-space-micro);
        border-radius: var(--bobr-radius);
    }

    app[name=search] .wrap-filter-result .filter {
        display: flex;
        flex-wrap: wrap;
        gap: var(--bobr-space-micro);
    }

    app[name=search] .wrap-filter-result .filter bo-button.source-filter {
        margin: 0;
        padding: 0;
    }

    app[name=search] .wrap-filter-result .filter bo-button.source-filter>.wrap-com>button {
        width: max-content;
        height: 22px;
        padding: 0 8px 3px;
        border-radius: var(--bobr-radius-min);
    }

    app[name=search] .wrap-filter-result .filter bo-button.source-filter>.wrap-com>button:before {
        content: '✓';
        display: inline-block;
        padding-right: 4px;
        width: 10px;
    }

    app[name=search] .wrap-filter-result .filter bo-button.source-filter.off>.wrap-com>button {
        background: var(--bobr-color-gray-middle);
    }

    app[name=search] .wrap-filter-result .filter bo-button.source-filter.off>.wrap-com>button:before {
        content: '•';
    }

    app[name=search] .wrap-filter-result .filter bo-button.source-filter.empty:not(.off) {
        opacity: .5;
    }

    app[name=search][data-mode=search][data-open=true] .wrap-filter-result {
        user-select: text;
        visibility: visible;
        transform: none;
        opacity: 1;
    }

    app[name=search][data-mode=search][data-open=true] .wrap-filter-result :is(bo-button, button, .wrap-result, iframe) {
        pointer-events: auto;
    }

    app[name=search] .wrap-result {
        overflow: hidden;
        transition: .15s;
        display: flex;
        flex-direction: column;
        max-height: calc(70vh - 50px);
        height: min-content;
        z-index: 99;
    }

    app[name=search] .wrap-result[data-empty='true'] {
        margin-top: -11px;
        visibility: hidden;
    }

    app[name=search] .wrap-result .search-results-frame {
        display: block;
        width: 100%;
        height: 0;
        min-height: 0;
        border: 0;
        box-sizing: border-box;
        background: white;
        transition: height .15s;
    }

    app[name=search] .wrap .backlight {
        background: #00000078;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 10;
        pointer-events: none;
        transition: opacity .15s, visibility .15s, backdrop-filter .15s;
    }

    app[name=search][data-mode=search][data-open=true] .backlight {
        visibility: visible;
        opacity: 1;
        backdrop-filter: blur(8px) saturate(.92);
        -webkit-backdrop-filter: blur(8px) saturate(.92);
        transition: opacity .25s, visibility .25s, backdrop-filter .25s;
    }

    html main mark {
        background: orange;
        color: black;
    }

    html span.highlight {
        background: yellow;
    }

    @container (max-width: 650px) {
        app[name=search] .hint::after {
            display: none;
        }
    }

    @media (max-width: 1024px) {
        app[name=search] .wrap {
            transition: .15s;
        }

        app[name=search] .wrap:focus-within {
            margin-left: -70px;
        }

    }

    @media (max-width: 768px) {
        grid[name="header"]:has(app[name=search] .wrap:focus-within)>bo-button.for-nav {
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
        }

        app[name='search'] .wrap-search .controls {
            flex-direction: column-reverse;
            gap: 3px;
            top: 11px;
        }

        app[name='search'] .wrap-search .controls bo-button.clear button {
            width: 22px;
            min-width: 22px;
            height: 12px;
            padding: 0;
            font-size: 0;
        }

        app[name='search'] .wrap-search .controls bo-toggle.type .toggle,
        app[name='search'] .wrap-search .controls bo-toggle.type .states {
            width: 22px;
            min-width: 22px;
            height: 12px;
        }

        app[name='search'] .wrap-search .controls bo-toggle.type .states {
            font-size: 0;
        }

        app[name='search'] .wrap-search .controls bo-toggle.type .states>div {
            width: 11px;
            height: 12px;
            padding: 0;
            clip-path: none;
        }

        app[name=search] .wrap .wrap-search .input {
            padding-inline-end: 60px;
            font-size: 1.25em;
        }
    }

    /* search */



    /* filter */

    app[name=filter] {
        --filter-input-radius: var(--bobr-radius-min);
    }

    app[name=filter] .wrap {
        position: relative;
        container-type: inline-size;
    }

    app[name=filter] .wrap-filter {
        box-sizing: border-box;
        width: 100%;
        background-color: var(--component-input-bg);
        border-radius: var(--filter-input-radius);
        position: relative;
        cursor: pointer;
        z-index: 100;
        transition: background-color .15s .1s, border-radius .15s;
    }

    app[name=filter] .wrap-filter:has(.input:not(:placeholder-shown)) {
        --filter-input-radius: var(--bobr-radius);
    }

    app[name=filter] .wrap-filter > bo-toggle.level {
        position: absolute;
        left: 6px;
        top: 25%;
        bottom: 25%;
        width: 6px;
        min-width: 0;
        height: auto;
        padding: 0;
        margin: 0;
        border-radius: var(--bobr-radius-max);
        cursor: pointer;
        opacity: 0;
        z-index: 3;
        transition: .15s transform, .15s background-color, .15s opacity;
    }

    app[name=filter] .wrap-filter > bo-toggle.level > .wrap-com,
    app[name=filter] .wrap-filter > bo-toggle.level > .wrap-com > .wrap-main,
    app[name=filter] .wrap-filter > bo-toggle.level .toggle {
        display: block;
        width: 100%;
        min-width: 0;
        height: 100%;
        margin: 0;
    }

    app[name=filter] .wrap-filter > bo-toggle.level .toggle {
        background-color: var(--bobr-color-blue);
        border-radius: var(--bobr-radius-max);
        transition: .15s transform, .15s background-color;
    }

    app[name=filter] .wrap-filter > bo-toggle.level .toggle::after {
        display: none;
    }

    app[name=filter] .wrap-filter > bo-toggle.level:hover .toggle {
        background-color: var(--bobr-color-blue-dark);
    }

    app[name=filter] .wrap-filter > bo-toggle.level:active {
        transform: scaleY(.8) !important;
        transition: 0s;
    }

    app[name=filter] .wrap-filter:focus-within > bo-toggle.level,
    app[name=filter] .wrap-filter > bo-toggle.level:active {
        opacity: 1;
    }

    app[name=filter][data-level=strict] .wrap-filter > bo-toggle.level .toggle {
        background-color: var(--bobr-color-green-deep);
    }

    app[name=filter] .wrap-filter bo-input.search-query {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    app[name=filter] .wrap-filter bo-input.search-query:is(.focus, :focus-within) {
        box-shadow: none;
        z-index: 0;
    }

    app[name=filter] .wrap-filter bo-input.search-query :is(.wrap-com, .wrap-main, .wrap-input) {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    app[name=filter] .wrap-filter .input {
        display: block;
        width: 100%;
        height: 36px;
        min-width: 0;
        min-height: 36px;
        box-sizing: border-box;
        padding: 2px 92px 6px 12px;
        overflow: hidden;
        cursor: text;
        background-color: transparent;
        border-radius: var(--filter-input-radius);
        font-size: 1.5em;
        font-weight: 300;
        transition: none;
    }

    app[name=filter] .wrap-filter .input:placeholder-shown {
        height: 28px;
        min-height: 28px;
        font-size: 1.1em;
    }

    app[name=filter] .wrap-filter .input:focus {
        padding-inline-start: 18px;
        background-color: transparent;
    }

    app[name=filter] .wrap-filter .input::placeholder,
    app[name=filter] .wrap-filter .input:focus::placeholder {
        color: var(--component-placeholder-text);
    }

    app[name=filter] .wrap-filter .controls {
        display: flex;
        gap: var(--bobr-space-micro);
        position: absolute;
        right: 7px;
        top: 7px;
        pointer-events: none;
        z-index: 3;
    }

    app[name=filter] .wrap-filter .controls>bo-button {
        box-sizing: border-box;
        border-radius: var(--bobr-radius-max);
        cursor: pointer;
        min-height: 0;
        margin: 0;
        padding: 0;
        display: block;
        transform: translateX(-3px);
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        transition: opacity .15s, visibility .15s, transform .15s, background-color .15s;
    }

    app[name=filter] .wrap-filter .controls>bo-button>.wrap-com {
        display: block;
        gap: 0;
        margin: 0;
    }

    app[name=filter] .wrap-filter .controls>bo-button>.wrap-com>button {
        height: auto;
        padding: 4px 11px 9px;
        border-radius: var(--bobr-radius-max);
        background-color: var(--bobr-color-black-light);
    }

    app[name=filter] .wrap-filter .controls>bo-button>.wrap-com>button::after {
        display: none;
    }

    app[name=filter] .wrap-filter .controls>bo-button:hover>.wrap-com>button {
        background-color: black;
    }

    app[name=filter] .wrap-filter .controls:active>bo-button,
    app[name=filter] .wrap:focus-within .wrap-filter:has(.input:not(:placeholder-shown)) bo-button.clear,
    app[name=filter] .wrap:has(.input:not(:placeholder-shown)) bo-button.clear {
        pointer-events: auto;
        visibility: visible;
        transform: none;
        opacity: 1;
    }

    @container (max-width: 450px) {
        app[name=filter] .hint::after {
            display: none;
        }
    }

    /* filter */



    /* nav */

    app[name=nav] {
        --nav-size: min(460px, calc(100vw - 24px));
        --nav-height: min(760px, calc(100dvh - 24px));
        --nav-gap: 16px;
        --nav-padding: 12px;
    }

    app[name=nav] nav .wrap-nav {
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgb(255 255 255 / 24%) transparent;
    }

    app[name=nav] nav .wrap-nav::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background: transparent;
        border-radius: var(--bobr-radius);
    }

    app[name=nav] nav .wrap-nav::-webkit-scrollbar-thumb {
        background: rgb(255 255 255 / 24%);
        border-radius: var(--bobr-radius);
        border: none;
    }

    app[name=nav] nav .wrap-nav::-webkit-scrollbar-thumb:hover {
        background: rgb(255 255 255 / 42%);
    }

    app[name=nav] nav .wrap-nav ul {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        padding: 0 6px 0 0;
        list-style: none;
    }

    app[name=nav] nav .wrap-nav ul.custom {
        flex-direction: row;
    }

    app[name=nav] nav .wrap-nav ul li {
        position: relative;
        display: block;
        min-width: 0;
        --nav-icon: url(/_engine/asset/vector/ico/clock-history.svg);
    }

    app[name=nav] nav .wrap-nav ul.recent {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgb(255 255 255 / 10%);
    }

    app[name=nav] nav .wrap-nav ul.recent:empty {
        display: none;
    }

    app[name=nav] nav .wrap-nav a {
        display: flex;
        align-items: center;
        gap: 11px;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 9px 10px 10px;
        border-radius: 10px;
        color: rgb(255 255 255 / 78%);
        font-size: .92rem;
        font-weight: 400;
        line-height: 1.2;
        text-decoration: none;
        transition: color .15s, background-color .15s, transform .15s;
    }

    app[name=nav] nav .wrap-nav a:hover {
        background: rgb(255 255 255 / 9%);
        color: white;
    }

    app[name=nav] nav .wrap-nav a:active {
        transform: translateY(1px);
    }

    app[name=nav] nav .wrap-nav a.active {
        background: var(--bobr-color-blue);
        color: white;
        box-shadow: 0 8px 18px rgb(0 73 184 / 24%);
    }

    app[name=nav] nav .wrap-nav .nav-icon {
        width: 18px;
        min-width: 18px;
        height: 18px;
        background: currentColor;
        mask: var(--nav-icon) center / contain no-repeat;
        -webkit-mask: var(--nav-icon) center / contain no-repeat;
        opacity: .82;
    }

    app[name=nav] nav .wrap-nav [data-nav-kind='dashboard'] {
        --nav-icon: url(/_engine/asset/vector/ico/grid-1x2-fill.svg);
    }

    app[name=nav] nav .wrap-nav [data-nav-kind='support'] {
        --nav-icon: url(/_engine/asset/vector/ico/life-preserver.svg);
    }

    app[name=nav] nav .wrap-nav [data-nav-kind='admin'] {
        --nav-icon: url(/_engine/asset/vector/ico/gear-fill.svg);
    }

    app[name=nav] nav .wrap-nav .nav-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    app[name=nav] .after {
        padding-top: var(--nav-gap);
        border-top: 1px solid rgb(255 255 255 / 10%);
        color: white;
    }

    /* apps nav */

    flex[name="apps"] app[name=nav] nav {
        position: fixed;
        inset: var(--nav-padding) auto auto var(--nav-padding);
        width: var(--nav-size);
        height: var(--nav-height);
        min-height: min(370px, calc(100dvh - 24px));
        padding: 18px;
        box-sizing: border-box;
        border: 1px solid rgb(255 255 255 / 10%);
        border-radius: 18px;
        background: linear-gradient(155deg, rgb(27 31 39 / 98%), rgb(10 13 18 / 98%));
        box-shadow: 0 24px 64px rgb(0 0 0 / 34%);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 1000;
        transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .2s, visibility .2s;
        transform: translateX(calc((100% + var(--nav-padding) + 8px) * -1));
        opacity: 0;
        visibility: hidden;
    }

    flex[name="apps"] app[name=nav] nav>.wrap {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: var(--nav-gap);
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    flex[name="apps"] app[name=nav] .backlight {
        background-color: rgb(0 4 16 / 36%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: opacity .15s, visibility .15s, backdrop-filter .15s;
    }

    flex[name="apps"] app[name=nav].active .backlight {
        opacity: 1;
        visibility: visible;
        backdrop-filter: blur(8px) saturate(.92);
        -webkit-backdrop-filter: blur(8px) saturate(.92);
        transition: opacity .25s, visibility .25s, backdrop-filter .25s;
    }

    flex[name="apps"] app[name=nav].active nav {
        transform: none;
        opacity: 1;
        visibility: visible;
    }

    @media (max-height: 780px) {
        flex[name="apps"] app[name=nav] nav {
            height: calc(100dvh - 24px);
        }
    }

    /* nav */



    /* user */

    app[name=user] button.exit {
        background: var(--bobr-color-red);
    }

    app[name=user] .wrap-user {
        display: flex;
        align-items: center;
        gap: var(--bobr-space-min);
    }

    app[name=user] .last-entrance {
        color: #ababab;
        font-size: .85em;
    }

    app[name=user][data-mode]:before {
        content: attr(data-mode);
        color: #ffffff73;
        font-weight: 200;
    }

    /* user */


    /* logo в nav */

    app[name=nav] .before .logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    app[name=nav] .before .logo a {
        display: flex;
        justify-content: flex-start;
    }

    app[name=nav] nav>.wrap>.before {
        padding: 2px 4px var(--nav-gap);
        border-bottom: 1px solid rgb(255 255 255 / 10%);
    }

    /* logo в nav */
    /* user в nav */

    app[name=nav] .after app[name=user] {

        & .wrap-user {
            align-items: center;
            gap: 2px 12px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;

            & .avatar {
                grid-column: 1;
                grid-row: 1 / 3;
                width: 42px;
                height: 42px;
                object-fit: cover;
                border-radius: var(--bobr-radius-max);
            }

            & :is(.name, .last-entrance) {
                grid-column: 1;
                min-width: 0;
                overflow: hidden;
                white-space: nowrap;
            }

            & .name {
                font-size: .9rem;
                font-weight: 500;
            }

            & .exit {
                margin-left: auto;
                grid-row: 1 / 3;
                grid-column: 2;
                height: 36px;
                padding-inline: 10px;
                border-radius: 10px;
            }

            &:has(.avatar) {
                grid-template-columns: 42px minmax(0, 1fr) auto;

                & :is(.name, .last-entrance) {
                    grid-column: 2;
                }

                & .exit {
                    grid-column: 3;
                }
            }
        }
    }

    /* user в nav */


    /* tabs v2 */

    app[name=tabs] {
        margin-block-end: calc(var(--bobr-space-middle)* -1);
        max-width: fit-content;

        & tabs {
            display: flex;
            gap: calc(var(--bobr-space-micro) / 2);
            margin: auto calc(var(--tabs-inline-offset) * -1);
            padding: 0 var(--tabs-inline-offset);
            border-bottom: 1px solid black;
            overflow: hidden;
            user-select: none;

            --tabs-inline-offset: calc(var(--bobr-space-min) / 2);
            --tabs-indicator-radius: 4px;
        }

        & tabs tab {
            display: flex;
            flex-direction: column;
            cursor: pointer;

            &:after {
                content: "";
                display: block;
                height: 7px;
                width: 100%;
                display: flex;
                flex-direction: column;
                background-color: black;
                border-radius: var(--tabs-indicator-radius) var(--tabs-indicator-radius) 0 0;
                margin-block-end: -2px;
                pointer-events: none;
                transition: background-color .15s, transform .15s;
            }

            &[active]:after {
                background-color: var(--bobr-color-blue);
            }

            &:hover:after {
                background-color: var(--bobr-color-blue-dark);
                transform: scaleX(.95);
            }

            &:active:after {
                transform: scale(.9);
            }
        }

        & tabs tab a {
            position: relative;
            display: block;
            padding: 0 5px 5px;
            margin: auto 2px;
            text-decoration: none;
            color: black;

            &:after {
                content: "";
                position: absolute;
                inset: 0 0 -5px 0;
            }
        }

        &.sticky {
            position: sticky;
            top: var(--app-tab-sticky);
            margin-block: calc(var(--bobr-space-middle)* -1) auto;
            z-index: 1;

            --app-tab-sticky: 94px;

            & tabs {
                border-bottom: none;
                border-top: 1px solid black;

                & a {
                    background-color: #ffffffe6;
                    border-radius: var(--bobr-radius-min);

                    &:after {
                        inset: -5px 0 0 0;
                    }
                }

                & tab {
                    flex-direction: column-reverse;
                }

                & tab:after {
                    margin-block: -2px auto;
                    border-radius: 0 0 var(--tabs-indicator-radius) var(--tabs-indicator-radius);
                }
            }
        }
    }

    /* tabs */

    /* header */

    grid[name="header"] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--bobr-space-min);
        align-items: center;
        position: sticky;
        top: var(--bobr-space-min);
        z-index: 665;
    }

    grid[name="header"]::before {
        content: '';
        position: absolute;
        inset: calc(var(--bobr-space-min) * -1);
        border-radius: 0 0 var(--bobr-radius) var(--bobr-radius);
        background-color: white;
    }

    grid[name="header"]>app[name=search] {
        min-width: 0;
    }

    grid[name="header"]>bo-button.for-nav {
        z-index: 101;
    }

    grid[name="header"] bo-button.for-nav button {
        width: 50px;
        height: 50px;
        border-radius: var(--bobr-radius-max);
    }

    grid[name="header"] bo-button.for-nav button:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 40%;
        height: 40%;
        margin: auto;
        border-radius: var(--bobr-radius-max);
        background: white;
    }

    grid[name="header"] app[name=breadcrumbs] {
        grid-column: 1 / 3;
    }

    @media (max-width: 1280px) {
        grid[name="header"]::before {
            border-bottom: 1.5px solid var(--bobr-color-gray-light);
        }

        app[name="breadcrumbs"] {
            margin-block-start: calc(var(--bobr-space-min) - var(--bobr-space) / 1.3);
        }
    }

    /* header */

    @media (max-width: 780px) {

        body {
            padding-left: var(--bobr-space-min);
        }

        ui left {
            display: none;
        }

        flex[name="apps"] app[name=nav] nav {
            inset: 8px auto auto 8px;
            width: calc(100vw - 16px);
            height: calc(100dvh - 16px);
            min-height: 0;
            padding: 16px;
            border-radius: 16px;
        }

        app[name=nav] .after app[name=user] .wrap-user .exit label {
            display: none;
        }
    }

    span.hint {
        color: #b4b4b4;
    }

    span.hint:after {
        content: "⇥ tab";
        margin-inline: 14px;
        padding-inline: 9px;
        padding-block: 4px 6px;
        background-color: #002fff0f;
        white-space: nowrap;
        border-radius: 12px;
        color: #8594cb;
    }

    :is(label, header):empty {
        display: none;
    }

    footer {
        flex: 100%;
        padding: 2cap;
        background-color: rgb(0 0 0 / 3%);
        border-radius: var(--bobr-radius-min);

        display: none;
    }

    html[data-status=wait] {
        cursor: wait !important;
        pointer-events: none !important;
        user-select: none !important;
    }

    html.locked main *,
    html.locked ui modal * {
        pointer-events: none;
    }

    html.locked grid[name="header"] bo-button.for-nav button {
        background: var(--bobr-color-red);
    }

    html.locked.freeze grid[name="header"] bo-button.for-nav button {
        background: var(--bobr-color-blue);
    }

    html.locked grid[name="header"] bo-button.for-nav button:before {
        mask-image: url(/_engine/asset/vector/ico/lock.svg);
        mask-size: contain;
        -webkit-mask-image: url(/_engine/asset/vector/ico/lock.svg);
        -webkit-mask-size: contain;
        width: 50%;
        height: 50%;
    }

    html.locked.freeze grid[name="header"] bo-button.for-nav button:before {
        mask-image: url(/_engine/asset/vector/ico/snow.svg);
        -webkit-mask-image: url(/_engine/asset/vector/ico/snow.svg);
    }

    html.reload grid[name="header"] bo-button.for-nav button:before {
        mask-image: url(/_engine/asset/vector/ico/arrow-clockwise.svg) !important;
        mask-size: contain;
        -webkit-mask-image: url(/_engine/asset/vector/ico/arrow-clockwise.svg) !important;
        -webkit-mask-size: contain;
        width: 50%;
        height: 50%;
        animation: loading 1.5s linear infinite;
    }

    /* animations */

    @keyframes loading {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* animations */
}