:root {
    --phx-v74-header-h: 82px;
    --phx-v74-sidebar-w: 304px;
    --phx-v74-rail-w: 18px;
    --phx-v74-accent: #70ddff;
    --phx-v74-alert: #ff6a45;
}

/* Шапка всегда остаётся отдельным слоем и не перекрывает дерево. */
.topbar,
.app-header {
    z-index: 180 !important;
    min-width: 0 !important;
}

.topbar > *,
.app-header > * {
    min-width: 0;
}

.brand,
.brand__copy,
.brand > span,
.topbar .brand {
    min-width: 0 !important;
}

.brand strong,
.brand__title,
.brand__sub,
.brand small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Дерево имеет собственную прокрутку. Нативную полосу прячем, потому что
   справа рисуется крупный интерактивный ползунок. */
body .sidebar {
    position: fixed !important;
    top: var(--phx-v74-header-h) !important;
    bottom: 0 !important;
    left: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: var(--phx-v74-sidebar-w) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
    z-index: 150 !important;
}

body .sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}

body .site-main,
body .workspace {
    min-width: 0 !important;
    margin-left: var(--phx-v74-sidebar-w) !important;
    width: calc(100% - var(--phx-v74-sidebar-w)) !important;
}

/* Карточка пользователя больше не висит поверх версии ARCHIVE OS. */
.phx-v74-account-card {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% - 12px) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 8px 6px 12px !important;
    transform: none !important;
    z-index: 2 !important;
    box-sizing: border-box !important;
}

.sidebar > .phx-v74-account-card + .sidebar-head,
.sidebar > .phx-v74-account-card + .sidebar__status {
    margin-top: 0 !important;
}

.sidebar-head,
.sidebar__status {
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
    clear: both;
}

/* Внешняя дорожка прокрутки дерева. */
.phx-v74-scroll-rail {
    position: fixed;
    top: calc(var(--phx-v74-header-h) + 10px);
    bottom: 12px;
    left: calc(var(--phx-v74-sidebar-w) - var(--phx-v74-rail-w));
    width: var(--phx-v74-rail-w);
    z-index: 175;
    border: 1px solid rgba(95, 205, 255, .24);
    border-radius: 999px;
    background: rgba(2, 10, 18, .92);
    box-shadow: 0 0 24px rgba(62, 178, 255, .12);
    touch-action: none;
    user-select: none;
    cursor: pointer;
}

.phx-v74-scroll-rail[hidden] {
    display: none !important;
}

.phx-v74-scroll-thumb {
    position: absolute;
    left: 2px;
    right: 2px;
    top: 0;
    min-height: 58px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(151, 239, 255, .98), rgba(70, 176, 255, .95) 48%, rgba(35, 109, 220, .98));
    border: 1px solid rgba(212, 250, 255, .58);
    box-shadow:
        0 0 18px rgba(95, 214, 255, .42),
        inset 0 0 8px rgba(255,255,255,.22);
    cursor: ns-resize;
    touch-action: none;
}

.phx-v74-scroll-thumb::before,
.phx-v74-scroll-thumb::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 7px;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(2, 25, 43, .72);
    box-shadow: 0 4px 0 rgba(2, 25, 43, .72), 0 8px 0 rgba(2, 25, 43, .72);
}

.phx-v74-scroll-thumb::before { top: 18px; }
.phx-v74-scroll-thumb::after { bottom: 26px; }

.phx-v74-scroll-thumb.is-dragging {
    filter: brightness(1.18);
    box-shadow: 0 0 28px rgba(95, 214, 255, .64);
}

.phx-v74-sidebar-toggle {
    position: fixed;
    top: 50%;
    left: calc(var(--phx-v74-sidebar-w) - 31px);
    width: 42px;
    height: 78px;
    transform: translateY(-50%);
    z-index: 176;
    border: 1px solid rgba(112, 221, 255, .34);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(7, 25, 41, .98), rgba(2, 10, 18, .98));
    color: var(--phx-v74-accent);
    box-shadow: 0 18px 40px rgba(0,0,0,.35), 0 0 22px rgba(77, 191, 255, .12);
    cursor: pointer;
    touch-action: manipulation;
}

.phx-v74-sidebar-toggle::before {
    content: "‹";
    font-size: 24px;
}

body.phx-v74-sidebar-collapsed .sidebar {
    transform: translateX(calc(-100% + 14px)) !important;
}

body.phx-v74-sidebar-collapsed .site-main,
body.phx-v74-sidebar-collapsed .workspace {
    margin-left: 14px !important;
    width: calc(100% - 14px) !important;
}

body.phx-v74-sidebar-collapsed .phx-v74-scroll-rail {
    left: 0;
    opacity: .45;
}

body.phx-v74-sidebar-collapsed .phx-v74-sidebar-toggle {
    left: 0;
}

body.phx-v74-sidebar-collapsed .phx-v74-sidebar-toggle::before {
    content: "›";
}

.phx-v74-backdrop {
    display: none;
}

/* Без двойных select: когда кастомная оболочка уже создана, нативный select
   остаётся в DOM для значения формы, но визуально скрывается. */
.phx-select > select,
.phx-select select.phx-select-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (max-width: 900px) {
    :root {
        --phx-v74-sidebar-w: min(88vw, 360px);
    }

    body .sidebar {
        transform: translateX(-105%) !important;
        box-shadow: 28px 0 80px rgba(0,0,0,.55);
    }

    body.phx-v74-sidebar-open .sidebar {
        transform: translateX(0) !important;
    }

    body .site-main,
    body .workspace,
    body.phx-v74-sidebar-collapsed .site-main,
    body.phx-v74-sidebar-collapsed .workspace {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .phx-v74-scroll-rail,
    body.phx-v74-sidebar-collapsed .phx-v74-scroll-rail {
        left: 2px;
        opacity: 0;
        pointer-events: none;
    }

    body.phx-v74-sidebar-open .phx-v74-scroll-rail {
        left: calc(var(--phx-v74-sidebar-w) - var(--phx-v74-rail-w));
        opacity: 1;
        pointer-events: auto;
    }

    .phx-v74-sidebar-toggle,
    body.phx-v74-sidebar-collapsed .phx-v74-sidebar-toggle {
        left: 2px;
    }

    body.phx-v74-sidebar-open .phx-v74-sidebar-toggle {
        left: calc(var(--phx-v74-sidebar-w) - 31px);
    }

    .phx-v74-sidebar-toggle::before,
    body.phx-v74-sidebar-collapsed .phx-v74-sidebar-toggle::before {
        content: "›";
    }

    body.phx-v74-sidebar-open .phx-v74-sidebar-toggle::before {
        content: "‹";
    }

    .phx-v74-backdrop {
        position: fixed;
        inset: var(--phx-v74-header-h) 0 0 0;
        z-index: 140;
        background: rgba(0, 5, 10, .66);
        backdrop-filter: blur(5px);
    }

    body.phx-v74-sidebar-open .phx-v74-backdrop {
        display: block;
    }

    .phx-v74-account-card {
        width: calc(100% - 16px) !important;
        margin-inline: 8px !important;
    }
}

@media (max-width: 560px) {
    .topbar,
    .app-header {
        padding-inline: 10px !important;
        gap: 8px !important;
    }

    .brand__sub,
    .brand small {
        display: none !important;
    }

    .phx-v74-sidebar-toggle {
        width: 38px;
        height: 68px;
    }
}