.explorer-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) var(--shell-inspector-width);
    min-height: calc(100vh - var(--shell-header-height));
    background: var(--shell-bg);
    transition: grid-template-columns 180ms ease;
}

.explorer-shell--left-collapsed {
    grid-template-columns: 52px minmax(0, 1fr) var(--shell-inspector-width);
}

.explorer-shell--right-collapsed {
    grid-template-columns: 280px minmax(0, 1fr) 52px;
}

.explorer-shell--left-collapsed.explorer-shell--right-collapsed {
    grid-template-columns: 52px minmax(0, 1fr) 52px;
}

.explorer-shell__panel {
    position: sticky;
    top: var(--shell-header-height);
    align-self: start;
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    min-height: calc(100vh - var(--shell-header-height));
    padding: 10px;
    background: var(--shell-panel);
    transition: padding 180ms ease;
}

.explorer-shell__panel--left {
    border-right: 1px solid var(--shell-line);
}

.explorer-shell__panel--right {
    border-left: 1px solid var(--shell-line);
}

.explorer-shell__panel-toggle {
    position: relative;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 9px;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius-sm);
    background: var(--shell-control);
    color: var(--shell-text);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
}

.explorer-shell__panel-toggle:hover,
.explorer-shell__panel-toggle:focus {
    border-color: var(--shell-line-strong);
    background: var(--surface_hover);
}

.explorer-shell__panel-toggle svg {
    width: 17px;
    height: 17px;
}

.explorer-shell__panel-active-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--shell-accent-strong);
}

.explorer-shell__panel-body,
.explorer-shell__main,
.explorer-shell__content {
    min-width: 0;
}

.explorer-shell--left-collapsed .explorer-shell__panel--left,
.explorer-shell--right-collapsed .explorer-shell__panel--right {
    justify-items: center;
    padding: 10px 6px;
}

.explorer-shell--left-collapsed .explorer-shell__panel--left .explorer-shell__panel-toggle,
.explorer-shell--right-collapsed .explorer-shell__panel--right .explorer-shell__panel-toggle {
    width: 38px;
    min-height: 38px;
    padding: 0;
}

.explorer-shell--left-collapsed .explorer-shell__panel--left .explorer-shell__panel-toggle-text,
.explorer-shell--left-collapsed .explorer-shell__panel--left .explorer-shell__panel-body,
.explorer-shell--right-collapsed .explorer-shell__panel--right .explorer-shell__panel-toggle-text,
.explorer-shell--right-collapsed .explorer-shell__panel--right .explorer-shell__panel-body {
    display: none;
}

.explorer-shell--left-collapsed .explorer-shell__panel--left .explorer-shell__panel-active-dot,
.explorer-shell--right-collapsed .explorer-shell__panel--right .explorer-shell__panel-active-dot {
    position: absolute;
    top: 9px;
    right: 9px;
}

.explorer-shell__panel--right .explorer-shell__panel-body {
    max-height: calc(100vh - var(--shell-header-height) - 64px);
    overflow: auto;
}

.explorer-shell__main {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 10px 12px 14px;
}

.explorer-shell__header {
    display: grid;
    gap: 4px;
}

.explorer-shell__title {
    margin: 0;
    font-size: 1.04rem;
    letter-spacing: 0;
}

.explorer-shell__subtitle {
    margin: 0;
    color: var(--shell-text-soft);
    font-size: 0.84rem;
    line-height: 1.45;
}

.explorer-shell__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr) auto;
    gap: 10px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--shell-line);
}

.explorer-shell__toolbar-left,
.explorer-shell__toolbar-center,
.explorer-shell__toolbar-right {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.explorer-shell__toolbar-center {
    justify-content: center;
}

.explorer-shell__toolbar-right {
    justify-content: flex-end;
}

.explorer-shell__content {
    display: grid;
    gap: 10px;
}

.shell-app.is-focus-mode .explorer-shell {
    grid-template-columns: 280px minmax(0, 1fr);
}

.shell-app.is-focus-mode .explorer-shell--left-collapsed {
    grid-template-columns: 52px minmax(0, 1fr);
}

.shell-app.is-focus-mode .explorer-shell__panel--right {
    display: none;
}

@media (max-width: 1280px) {
    .explorer-shell,
    .explorer-shell--left-collapsed,
    .explorer-shell--right-collapsed,
    .explorer-shell--left-collapsed.explorer-shell--right-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .explorer-shell__panel {
        position: static;
        min-height: 0;
    }

    .explorer-shell__panel--left {
        border-right: 0;
        border-bottom: 1px solid var(--shell-line);
    }

    .explorer-shell__panel--right {
        border-top: 1px solid var(--shell-line);
        border-left: 0;
    }

    .explorer-shell--left-collapsed .explorer-shell__panel--left,
    .explorer-shell--right-collapsed .explorer-shell__panel--right {
        width: 52px;
        border-bottom: 0;
    }
}

@media (max-width: 980px) {
    .explorer-shell__toolbar {
        grid-template-columns: 1fr;
    }

    .explorer-shell__toolbar-left,
    .explorer-shell__toolbar-center,
    .explorer-shell__toolbar-right {
        justify-content: flex-start;
    }
}