.sub-side-bar {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: var(--sidebar-width);
    width: var(--subsidebar-width);
    height: 100%;
    overflow: hidden;
    background: var(--app-subsidebar);
    border-right: 1px solid var(--app-line);
    color: var(--app-ink);
    font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
    transition: left .5s ease-in-out, width .5s ease-in-out;
}

.sub-side-bar[hidden] { display: none; }
.sub-side-bar-heading {
    box-sizing: border-box;
    height: 64px;
    margin: 0;
    padding: 24px 16px 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.sub-side-bar nav { height: calc(100% - 64px); overflow: hidden auto; }
.sub-side-bar-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}
.sub-side-bar-item:hover { background: var(--app-tile); }
.sub-side-bar-item.is-active { background: var(--app-tile); color: var(--app-ink); box-shadow: inset 3px 0 var(--app-ink); }
.sub-side-bar-item:focus-visible { outline: 2px solid var(--app-ink); outline-offset: -3px; }
.sub-side-bar-icon, .sub-side-bar-icon svg { display: block; width: 24px; height: 24px; flex-shrink: 0; }
.sub-side-bar-icon svg [fill]:not([fill="none"]) { fill: currentColor; }
.sub-side-bar-text { overflow: hidden; text-overflow: ellipsis; }
.sidebar-collapsed .sub-side-bar-heading { visibility: hidden; }
.sidebar-collapsed .sub-side-bar-item { justify-content: center; padding: 12px 0; gap: 0; }
.sidebar-collapsed .sub-side-bar-text { display: none; }

@media (max-width: 849px) {
    .sub-side-bar { width: calc(100% - var(--sidebar-width)); height: 64px; border-right: 0; border-bottom: 1px solid var(--app-line); }
    .sub-side-bar-heading { display: none; }
    .sub-side-bar nav { display: flex; height: 100%; overflow: auto hidden; }
    .sub-side-bar .sub-side-bar-item { flex: 0 0 auto; width: auto; justify-content: flex-start; gap: 8px; padding: 12px; }
    .sub-side-bar .sub-side-bar-text { display: inline; }
    .sub-side-bar-item.is-active { box-shadow: inset 0 -3px var(--app-ink); }
}

@media (prefers-reduced-motion: reduce) {
    .sub-side-bar { transition: none; }
}