:root {
    --app-sidebar-expanded: 276px;
    --app-sidebar-collapsed: 74px;
    --app-sidebar-width: var(--app-sidebar-expanded);
}

body.is-app-sidebar-collapsed {
    --app-sidebar-width: var(--app-sidebar-collapsed);
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 900;
    width: var(--app-sidebar-width);
    padding: 10px;
    border-right: 1px solid rgba(29, 29, 31, 0.1);
    background: rgba(247, 247, 249, 0.9);
    box-shadow: 12px 0 38px rgba(18, 28, 45, 0.055);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    transition: width 220ms cubic-bezier(0.25, 0.8, 0.25, 1), transform 220ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.app-sidebar-inner {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-sidebar-brand-row {
    position: relative;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
}

.app-sidebar .brand {
    min-width: 0;
    height: 44px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 9px;
    border-radius: 13px;
    font-size: 24px;
    letter-spacing: -0.01em;
}

.app-sidebar .brand:hover {
    background: rgba(29, 29, 31, 0.045);
}

.app-sidebar .brand-mark,
.app-sidebar .brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.app-sidebar-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 120ms ease;
}

.app-sidebar-toggle {
    position: absolute;
    top: 13px;
    right: -24px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(29, 29, 31, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: #515154;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.app-sidebar-toggle:hover {
    background: #fff;
    color: var(--ui-blue, #0071e3);
    transform: scale(1.06);
}

.app-sidebar-toggle svg,
.app-sidebar-mobile-trigger svg,
.app-side-nav svg,
.app-sidebar-exit svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-sidebar-toggle svg {
    width: 17px;
    height: 17px;
    transition: transform 200ms ease;
}

.app-sidebar-caption {
    height: 34px;
    flex: 0 0 34px;
    padding: 7px 12px 5px;
    overflow: hidden;
    color: #86868b;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-transform: uppercase;
    transition: opacity 100ms ease;
}

.app-side-nav {
    min-height: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 2px 0 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
}

.app-side-nav::-webkit-scrollbar {
    display: none;
}

.app-side-nav > a,
.app-sidebar-exit {
    position: relative;
    min-height: 58px;
    flex: 0 0 58px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 5px 9px;
    border-radius: 12px;
    color: #515154;
    font-size: 21px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.app-side-nav > a:hover,
.app-sidebar-exit:hover {
    background: rgba(29, 29, 31, 0.055);
    color: #1d1d1f;
}

.app-side-nav > a:active,
.app-sidebar-exit:active {
    transform: scale(0.985);
}

.app-side-nav > a.active {
    background: rgba(0, 113, 227, 0.1);
    color: #0068d1;
}

.app-side-nav > a.active::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -4px;
    width: 3px;
    border-radius: 99px;
    background: var(--ui-blue, #0071e3);
}

.app-side-nav-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 9px;
}

.app-side-nav > a.active .app-side-nav-icon {
    background: rgba(0, 113, 227, 0.09);
}

.app-side-nav-label,
.app-sidebar-user-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: opacity 100ms ease;
}

.app-sidebar-userbar {
    flex: 0 0 auto;
    display: grid;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(29, 29, 31, 0.1);
}

.app-sidebar-profile {
    min-height: 58px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 5px 8px;
}

.app-sidebar-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #f0f7ff, #dcecff);
    color: #0068d1;
    font-size: 13px;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.1);
}

.app-sidebar-user-copy {
    display: grid;
    gap: 2px;
}

.app-sidebar-user-copy strong {
    overflow: hidden;
    color: #1d1d1f;
    font-size: 20px;
    font-weight: 600;
    text-overflow: ellipsis;
}

.app-sidebar-user-copy small {
    color: #86868b;
    font-size: 16px;
}

.app-sidebar-exit {
    color: #6e6e73;
}

.app-sidebar-exit:hover {
    color: #d70015;
    background: rgba(255, 59, 48, 0.075);
}

.app-sidebar-exit svg {
    justify-self: center;
}

.app-sidebar-mobile-trigger,
.app-sidebar-scrim,
.app-sidebar-edge {
    display: none;
}

body.is-app-sidebar-collapsed .app-sidebar-brand-name,
body.is-app-sidebar-collapsed .app-sidebar-caption,
body.is-app-sidebar-collapsed .app-side-nav-label,
body.is-app-sidebar-collapsed .app-sidebar-user-copy {
    display: none;
}

body.is-app-sidebar-collapsed .app-sidebar .brand,
body.is-app-sidebar-collapsed .app-side-nav > a,
body.is-app-sidebar-collapsed .app-sidebar-exit,
body.is-app-sidebar-collapsed .app-sidebar-profile {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    padding-right: 7px;
    padding-left: 7px;
}

body.is-app-sidebar-collapsed .app-sidebar-caption {
    height: 26px;
}

body.is-app-sidebar-collapsed .app-sidebar-toggle svg {
    transform: rotate(180deg);
}

body.is-app-sidebar-collapsed :is(.app-side-nav > a, .app-sidebar-profile, .app-sidebar-exit)[data-label]::after {
    content: attr(data-label);
    position: absolute;
    top: 50%;
    left: calc(100% + 13px);
    z-index: 1000;
    padding: 7px 10px;
    border: 1px solid rgba(29, 29, 31, 0.1);
    border-radius: 8px;
    background: rgba(29, 29, 31, 0.93);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(5px, -50%);
    transition: opacity 120ms ease, transform 120ms ease;
}

body.is-app-sidebar-collapsed :is(.app-side-nav > a, .app-sidebar-profile, .app-sidebar-exit)[data-label]:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.app-sidebar ~ .shell:not(.screen-shell) {
    width: min(1320px, calc(100vw - var(--app-sidebar-width) - 48px));
    margin-right: 0;
    margin-left: calc(var(--app-sidebar-width) + max(24px, (100vw - var(--app-sidebar-width) - 1320px) / 2));
    transition: width 220ms cubic-bezier(0.25, 0.8, 0.25, 1), margin-left 220ms cubic-bezier(0.25, 0.8, 0.25, 1);
}

.app-sidebar ~ .shell:has(.graph-filter-page) {
    width: min(1720px, calc(100vw - var(--app-sidebar-width) - 28px));
    margin-left: calc(var(--app-sidebar-width) + max(14px, (100vw - var(--app-sidebar-width) - 1720px) / 2));
}

.app-sidebar ~ .shell:has(.graph-filter-page.filter-home-page) {
    width: min(1320px, calc(100vw - var(--app-sidebar-width) - 48px));
    margin-left: calc(var(--app-sidebar-width) + max(24px, (100vw - var(--app-sidebar-width) - 1320px) / 2));
}

.app-sidebar ~ .shell:has(.graph-page) {
    width: min(1800px, calc(100vw - var(--app-sidebar-width) - 24px));
    margin-left: calc(var(--app-sidebar-width) + max(12px, (100vw - var(--app-sidebar-width) - 1800px) / 2));
}

.app-sidebar ~ .shell:has(.ml-model-create-page),
.app-sidebar ~ .shell:has(.ml-model-detail-page) {
    width: min(1540px, calc(100vw - var(--app-sidebar-width) - 48px));
    margin-left: calc(var(--app-sidebar-width) + max(24px, (100vw - var(--app-sidebar-width) - 1540px) / 2));
}

.app-sidebar ~ .shell .flash-stack {
    top: 20px;
}

/* 桌面端采用边缘唤出：导航覆盖在内容上方，页面本身不随悬停横向跳动。 */
@media (min-width: 1101px) {
    :root,
    body.is-app-sidebar-collapsed {
        --app-sidebar-width: 0px;
    }

    .app-sidebar {
        width: var(--app-sidebar-expanded);
        border-right-color: transparent;
        box-shadow: none;
        transform: translateX(-100%);
        transition:
            transform 220ms cubic-bezier(0.25, 0.8, 0.25, 1),
            border-color 160ms ease,
            box-shadow 220ms ease;
    }

    body.is-app-sidebar-revealed .app-sidebar {
        border-right-color: rgba(29, 29, 31, 0.1);
        box-shadow: 12px 0 38px rgba(18, 28, 45, 0.1);
        transform: translateX(0);
    }

    .app-sidebar-toggle {
        right: -54px;
        transition:
            right 220ms cubic-bezier(0.25, 0.8, 0.25, 1),
            color 160ms ease,
            background-color 160ms ease,
            transform 160ms ease;
    }

    body.is-app-sidebar-revealed .app-sidebar-toggle {
        right: -24px;
    }

    body:not(.is-app-sidebar-revealed) .app-sidebar-toggle svg {
        transform: rotate(180deg);
    }

    .app-sidebar-edge {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 895;
        width: 12px;
        display: block;
    }

    .app-sidebar ~ .shell:not(.screen-shell) {
        width: min(1320px, calc(100vw - 80px));
        margin-right: 24px;
        margin-left: max(56px, (100vw - 1320px) / 2);
    }

    .app-sidebar ~ .shell:has(.graph-filter-page) {
        width: min(1720px, calc(100vw - 68px));
        margin-right: 12px;
        margin-left: max(56px, (100vw - 1720px) / 2);
    }

    .app-sidebar ~ .shell:has(.graph-filter-page.filter-home-page) {
        width: min(1320px, calc(100vw - 80px));
        margin-right: 24px;
        margin-left: max(56px, (100vw - 1320px) / 2);
    }

    .app-sidebar ~ .shell:has(.graph-page) {
        width: min(1800px, calc(100vw - 68px));
        margin-right: 12px;
        margin-left: max(56px, (100vw - 1800px) / 2);
    }

    .app-sidebar ~ .shell:has(.ml-model-create-page),
    .app-sidebar ~ .shell:has(.ml-model-detail-page) {
        width: min(1540px, calc(100vw - 80px));
        margin-right: 24px;
        margin-left: max(56px, (100vw - 1540px) / 2);
    }

}

@media (max-height: 690px) and (min-width: 1101px) {
    .app-sidebar {
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .app-sidebar-brand-row {
        height: 58px;
        flex-basis: 58px;
    }

    .app-sidebar-caption {
        height: 30px;
        flex-basis: 30px;
        padding-top: 5px;
    }

    .app-side-nav {
        gap: 2px;
        padding-bottom: 5px;
    }

    .app-side-nav > a,
    .app-sidebar-exit {
        min-height: 52px;
        flex-basis: 52px;
    }

    .app-sidebar-profile {
        min-height: 52px;
    }
}

@media (max-width: 1100px) {
    :root,
    body.is-app-sidebar-collapsed {
        --app-sidebar-width: 0px;
    }

    .app-sidebar {
        width: var(--app-sidebar-expanded);
        transform: translateX(calc(-100% - 34px));
    }

    body.is-app-sidebar-open {
        overflow: hidden;
    }

    body.is-app-sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    body.is-app-sidebar-collapsed .app-sidebar-brand-name,
    body.is-app-sidebar-collapsed .app-side-nav-label,
    body.is-app-sidebar-collapsed .app-sidebar-user-copy {
        display: block;
    }

    body.is-app-sidebar-collapsed .app-sidebar-caption {
        display: inline;
    }

    body.is-app-sidebar-collapsed .app-sidebar .brand,
    body.is-app-sidebar-collapsed .app-side-nav > a,
    body.is-app-sidebar-collapsed .app-sidebar-exit,
    body.is-app-sidebar-collapsed .app-sidebar-profile {
        grid-template-columns: 34px minmax(0, 1fr);
        justify-items: stretch;
        gap: 9px;
        padding-right: 9px;
        padding-left: 9px;
    }

    body.is-app-sidebar-collapsed .app-sidebar-profile {
        grid-template-columns: 32px minmax(0, 1fr);
        padding-right: 8px;
        padding-left: 8px;
    }

    body.is-app-sidebar-collapsed .app-sidebar-toggle svg {
        transform: none;
    }

    body.is-app-sidebar-collapsed :is(.app-side-nav > a, .app-sidebar-profile, .app-sidebar-exit)[data-label]::after {
        display: none;
    }

    .app-sidebar-toggle {
        right: 4px;
        box-shadow: none;
    }

    .app-sidebar-toggle svg {
        transform: rotate(0deg);
    }

    .app-sidebar-mobile-trigger {
        position: fixed;
        top: 14px;
        left: 14px;
        z-index: 880;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        padding: 0;
        border: 1px solid rgba(29, 29, 31, 0.11);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: #1d1d1f;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        cursor: pointer;
        transition: opacity 160ms ease, transform 160ms ease;
    }

    body.is-app-sidebar-open .app-sidebar-mobile-trigger {
        opacity: 0;
        pointer-events: none;
    }

    body.is-case-flow-revealed .app-sidebar-mobile-trigger {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.9);
    }

    .app-sidebar-scrim {
        position: fixed;
        inset: 0;
        z-index: 890;
        display: block;
        border: 0;
        background: rgba(0, 0, 0, 0.24);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    body.is-app-sidebar-open .app-sidebar-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .app-sidebar ~ .shell:not(.screen-shell),
    .app-sidebar ~ .shell:has(.ml-model-create-page),
    .app-sidebar ~ .shell:has(.ml-model-detail-page) {
        width: min(760px, calc(100vw - 28px));
        margin-right: auto;
        margin-left: auto;
        padding-top: 72px;
    }

    .app-sidebar ~ .shell:has(.graph-filter-page),
    .app-sidebar ~ .shell:has(.graph-page) {
        width: calc(100vw - 20px);
        margin-right: auto;
        margin-left: auto;
        padding-top: 72px;
    }

    .app-sidebar ~ .shell:has(.graph-filter-page.filter-home-page) {
        width: min(760px, calc(100vw - 28px));
        margin-right: auto;
        margin-left: auto;
        padding-top: 72px;
    }

}

@media (max-width: 680px) {
    .app-sidebar ~ .shell:not(.screen-shell),
    .app-sidebar ~ .shell:has(.ml-model-create-page),
    .app-sidebar ~ .shell:has(.ml-model-detail-page) {
        width: min(560px, calc(100vw - 24px));
        padding-top: 68px;
    }

    .app-sidebar ~ .shell:has(.graph-filter-page),
    .app-sidebar ~ .shell:has(.graph-page) {
        width: calc(100vw - 12px);
        padding-top: 68px;
    }

    .app-sidebar ~ .shell:has(.graph-filter-page.filter-home-page) {
        width: min(560px, calc(100vw - 24px));
        padding-top: 68px;
    }

    .app-sidebar-mobile-trigger {
        top: 12px;
        left: 12px;
        width: 40px;
        height: 40px;
    }

    .app-sidebar ~ .shell .flash-stack {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-sidebar,
    .app-sidebar ~ .shell:not(.screen-shell),
    .app-sidebar-scrim {
        transition-duration: 0.01ms;
    }
}

/* ========================================================================== */
/* 案例项目侧栏：顶部图标工具栏，中部项目列表，底部系统设置。                 */
/* ========================================================================== */

.app-project-sidebar .app-sidebar-brand-row {
    height: 102px;
    flex-basis: 102px;
    display: grid;
    grid-template-columns: minmax(96px, 1fr) 40px;
    grid-template-rows: 44px 44px;
    align-items: center;
    gap: 4px;
    margin-bottom: 7px;
    padding-right: 16px;
    border-bottom: 1px solid rgba(29, 29, 31, 0.08);
}

.app-project-sidebar .app-project-brand {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 44px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 12px;
}

.app-project-sidebar .brand-mark,
.app-project-sidebar .brand-logo {
    justify-self: center;
}

.app-project-brand-mark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(145deg, #0a84ff, #5e5ce6 65%, #af52de);
    color: #fff;
    box-shadow: 0 7px 16px rgba(58, 89, 195, 0.2);
}

.app-project-brand-mark svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-project-brand-name {
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-project-user {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: 40px;
    min-height: 0;
    display: grid;
    grid-template-columns: 32px minmax(72px, 1fr);
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 4px 7px 4px 4px;
    border-radius: 12px;
    background: transparent;
    color: #1d1d1f;
    transition: background-color 150ms ease, transform 150ms ease;
}

.app-project-user:hover,
.app-project-user.active {
    background: rgba(29, 29, 31, 0.055);
}

.app-project-user .app-sidebar-avatar {
    width: 32px;
    height: 32px;
}

.app-project-user-name {
    min-width: 72px;
    overflow: hidden;
    font-size: var(--type-body-large);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-body-large);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-project-create {
    grid-column: 2;
    grid-row: 2;
    width: 40px;
    height: 40px;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    border-radius: 12px;
    background: #0071e3;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 113, 227, 0.2);
    transition: background-color 150ms ease, transform 150ms ease;
}

.app-project-create:hover {
    background: #0077ed;
}

.app-project-create:active {
    transform: scale(0.985);
}

.app-project-create svg,
.app-project-link svg,
.app-sidebar-settings svg,
.app-settings-logout svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-project-create svg {
    justify-self: center;
}

.app-project-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-project-copy small {
    color: #86868b;
    font-size: 15px;
    line-height: 1.2;
}

.app-projects-heading {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px 8px;
    color: #86868b;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.app-projects-heading a {
    color: #0071e3;
    font-weight: 600;
    letter-spacing: 0;
}

/* 接收入口只占内容高度，将剩余空间留给项目列表。 */
.app-project-list {
    min-height: 92px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    padding: 0 1px 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 29, 31, 0.14) transparent;
}

.app-project-item {
    position: relative;
    flex: 0 0 auto;
    min-height: 68px;
}

.app-project-link {
    position: relative;
    min-height: 68px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    padding: 8px 42px 8px 8px;
    border-radius: 14px;
    color: #515154;
    transition: color 150ms ease, background-color 150ms ease;
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-project-chevron {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    opacity: 0.55;
    transition: transform 160ms ease;
}

.app-project-item.is-expanded .app-project-chevron {
    transform: rotate(180deg);
}

.app-project-sublist {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 2px 6px 6px 24px;
    padding-left: 12px;
    border-left: 1px solid rgba(29, 29, 31, 0.1);
}

.app-project-item.is-expanded .app-project-sublist {
    display: flex;
}

.app-project-home-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 2px;
}

.app-project-category-toggle {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #0068d1;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}

.app-project-category-toggle:hover {
    background: rgba(0, 113, 227, 0.09);
}

.app-project-category-toggle svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 160ms ease;
}

.app-project-category-toggle.is-all-open svg {
    transform: rotate(180deg);
}

.app-project-subitem {
    display: grid;
    grid-template-columns: 19px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    padding: 7px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #515154;
    font-size: var(--type-label);
    font-weight: var(--weight-medium);
    line-height: var(--leading-label);
    text-align: left;
    cursor: pointer;
    transition: color 140ms ease, background-color 140ms ease;
}

.app-project-subitem span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-project-subitem svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.app-project-subitem:hover {
    background: rgba(255, 255, 255, 0.78);
    color: #1d1d1f;
}

.app-project-subitem.active {
    background: rgba(0, 113, 227, 0.1);
    color: #0068d1;
}

.app-project-resource {
    position: relative;
    min-width: 0;
}

.app-project-resource.is-dragging {
    opacity: 0.42;
}

.app-project-resource-group {
    display: grid;
    gap: 2px;
    min-height: 34px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 11px;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.app-project-resource-group > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 6px;
    min-height: 27px;
    padding: 2px 7px;
    color: #86868b;
    font-size: var(--type-caption);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-caption);
}

.app-project-resource-group > summary::-webkit-details-marker {
    display: none;
}

.app-project-resource-group > summary {
    list-style: none;
    cursor: pointer;
}

.app-project-resource-group > summary > svg {
    grid-column: -1;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform 150ms ease;
}

.app-project-resource-group[open] > summary > svg {
    transform: rotate(180deg);
}

.app-project-resource-group > summary button {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6e6e73;
    cursor: pointer;
}

.app-project-resource-group > summary button:hover {
    background: rgba(29, 29, 31, 0.07);
}

.app-project-workflow-item {
    padding-left: 14px;
}

.app-project-resource-group.is-custom {
    border-color: rgba(0, 113, 227, 0.1);
    background: rgba(255, 255, 255, 0.42);
}

.app-project-resource-group.is-drag-over {
    border-color: rgba(0, 113, 227, 0.45);
    background: rgba(0, 113, 227, 0.08);
}

.app-project-group-empty {
    margin: 0;
    padding: 7px 9px;
    color: #86868b;
    font-size: var(--type-caption);
    line-height: var(--leading-caption);
}

.app-project-resource-group:has(.app-project-resource) > .app-project-group-empty {
    display: none;
}

.app-project-add-group {
    color: #515154;
}

.app-project-resource .app-project-subitem {
    padding-right: 34px;
}

.app-project-resource-more {
    position: absolute;
    z-index: 4;
    top: 6px;
    right: 4px;
    width: 27px;
    height: 27px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6e6e73;
    font-family: var(--font-latin);
    font-size: var(--type-note);
    font-weight: var(--weight-semibold);
    line-height: 1;
    opacity: 0;
    cursor: pointer;
}

.app-project-resource:hover .app-project-resource-more,
.app-project-resource:focus-within .app-project-resource-more,
.app-project-resource-more[aria-expanded="true"] {
    opacity: 1;
}

.app-project-resource-more:hover,
.app-project-resource-more[aria-expanded="true"] {
    background: rgba(29, 29, 31, 0.075);
    color: #1d1d1f;
}

.app-project-resource-menu {
    position: absolute;
    z-index: 24;
    top: 33px;
    right: 2px;
    width: 132px;
    display: grid;
    gap: 2px;
    padding: 5px;
    border: 1px solid rgba(210, 210, 215, 0.74);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 14px 34px rgba(29, 29, 31, 0.17);
    backdrop-filter: blur(20px);
}

.app-project-resource-menu.is-hidden {
    display: none;
}

.app-project-resource-menu button {
    min-height: 34px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1d1d1f;
    font-size: var(--type-label);
    font-weight: var(--weight-medium);
    line-height: var(--leading-label);
    text-align: left;
    cursor: pointer;
}

.app-project-resource-menu button:hover {
    background: rgba(0, 113, 227, 0.085);
    color: #0068d1;
}

.app-project-resource-menu button.is-danger {
    color: #d92d20;
}

.app-project-resource-menu button.is-danger:hover {
    background: rgba(255, 59, 48, 0.085);
    color: #c6251a;
}

.app-project-subcreate {
    color: #0068d1;
}

.app-project-subcreate:hover {
    background: rgba(0, 113, 227, 0.085);
    color: #0068d1;
}

.app-project-link:hover {
    background: rgba(255, 255, 255, 0.78);
    color: #1d1d1f;
}

.app-project-link.active {
    background: linear-gradient(110deg, rgba(0, 113, 227, 0.13), rgba(90, 200, 250, 0.055));
    color: #0068d1;
    box-shadow: inset 0 0 0 1px rgba(0, 113, 227, 0.075);
}

.app-project-link.active::before {
    content: "";
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: -1px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #0071e3;
}

.app-project-more {
    position: absolute;
    z-index: 3;
    top: 18px;
    right: 7px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #6e6e73;
    opacity: 0;
    cursor: pointer;
    transition: opacity 140ms ease, color 140ms ease, background-color 140ms ease;
}

.app-project-more svg {
    width: 19px;
    height: 19px;
    fill: currentColor;
}

.app-project-item:hover .app-project-more,
.app-project-item:focus-within .app-project-more,
.app-project-link.active + .app-project-more,
.app-project-more[aria-expanded="true"] {
    opacity: 1;
}

.app-project-more:hover,
.app-project-more[aria-expanded="true"] {
    background: rgba(29, 29, 31, 0.075);
    color: #1d1d1f;
}

.app-project-menu {
    position: absolute;
    z-index: 18;
    top: 54px;
    right: 4px;
    width: 184px;
    display: grid;
    gap: 3px;
    padding: 6px;
    border: 1px solid rgba(210, 210, 215, 0.74);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 18px 46px rgba(29, 29, 31, 0.18);
    backdrop-filter: blur(22px);
}

.app-project-item.opens-up .app-project-menu {
    top: auto;
    bottom: 54px;
}

.app-project-menu.is-hidden {
    display: none;
}

.app-project-menu button {
    width: 100%;
    min-height: 38px;
    display: grid;
    grid-template-columns: 21px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #1d1d1f;
    font-size: var(--type-body);
    font-weight: var(--weight-medium);
    line-height: var(--leading-body);
    text-align: left;
    cursor: pointer;
}

.app-project-menu button:hover {
    background: rgba(0, 113, 227, 0.085);
    color: #0068d1;
}

.app-project-menu button.is-danger {
    color: #d92d20;
}

.app-project-menu button.is-danger:hover {
    background: rgba(255, 59, 48, 0.085);
    color: #c6251a;
}

.app-project-menu svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.app-project-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(29, 29, 31, 0.045);
    color: #6e6e73;
}

.app-project-icon.active {
    background: rgba(52, 199, 89, 0.1);
    color: #248a3d;
}

.app-project-icon.closed {
    background: rgba(142, 142, 147, 0.1);
    color: #86868b;
}

.app-project-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.app-project-copy strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
}

.app-project-empty {
    display: grid;
    gap: 4px;
    margin: 4px;
    padding: 14px 11px;
    border: 1px dashed rgba(0, 113, 227, 0.22);
    border-radius: 12px;
    background: rgba(0, 113, 227, 0.04);
    color: #0068d1;
}

.app-project-dialog-backdrop {
    position: fixed;
    z-index: 180;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 20, 23, 0.36);
    backdrop-filter: blur(12px);
}

.app-project-dialog-backdrop.is-hidden {
    display: none;
}

.app-project-dialog {
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    width: min(520px, 100%);
    display: grid;
    gap: 18px;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background: rgba(252, 252, 253, 0.98);
    box-shadow: 0 28px 90px rgba(10, 15, 25, 0.26);
}

.app-project-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.app-project-dialog-head h2 {
    margin: 4px 0 0;
    font-family: var(--font-display);
    font-size: var(--type-section-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-section-title);
}

.app-project-dialog-head > button {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(118, 118, 128, 0.11);
    color: #6e6e73;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.app-project-dialog > p {
    margin: -4px 0 0;
    color: #6e6e73;
    font-size: var(--type-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
}

.app-project-dialog > label {
    display: grid;
    gap: 8px;
}

.app-project-dialog > label > span {
    color: #515154;
    font-size: var(--type-label);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-label);
}

.app-project-dialog input,
.app-project-dialog textarea {
    width: 100%;
    border: 1px solid rgba(118, 118, 128, 0.26);
    border-radius: 12px;
    background: #fff;
}

.app-project-dialog textarea {
    resize: vertical;
}

.app-project-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 2px;
}

.app-project-delete-dialog > p strong {
    color: #1d1d1f;
}

.app-project-create-dialog {
    width: min(620px, 100%);
}

.app-project-create-options {
    display: grid;
    gap: 10px;
}

.app-project-create-options > button {
    width: 100%;
    min-height: 86px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(118, 118, 128, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    color: #1d1d1f;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.app-project-create-options > button:hover,
.app-project-create-options > button:focus-visible {
    border-color: rgba(0, 113, 227, 0.35);
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 64, 128, 0.1);
    outline: 0;
    transform: translateY(-1px);
}

.app-project-create-options > button > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.app-project-create-options strong {
    font-size: var(--type-navigation);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-navigation);
}

.app-project-create-options small {
    color: #6e6e73;
    font-size: var(--type-label);
    font-weight: var(--weight-regular);
    line-height: var(--leading-label);
}

.app-project-create-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
}

.app-project-create-icon svg,
.app-project-create-chevron {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.app-project-create-icon svg {
    width: 27px;
    height: 27px;
}

.app-project-create-icon.is-dashboard {
    background: rgba(0, 113, 227, 0.1);
    color: #0068d1;
}

.app-project-create-icon.is-whiteboard {
    background: rgba(88, 86, 214, 0.1);
    color: #5856d6;
}

.app-project-create-icon.is-report {
    background: rgba(52, 199, 89, 0.11);
    color: #248a3d;
}

.app-project-create-chevron {
    width: 20px;
    height: 20px;
    color: #8e8e93;
}

.app-project-empty strong {
    font-size: 18px;
}

.app-project-empty small {
    color: #6e6e73;
    font-size: 15px;
    line-height: 1.45;
}

.app-sidebar-settings {
    position: relative;
    flex: 0 0 auto;
    padding-top: 8px;
    border-top: 1px solid rgba(29, 29, 31, 0.1);
}

.app-sidebar-settings > summary {
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 14px;
    color: #515154;
    cursor: pointer;
    font-size: 20px;
    font-weight: 600;
    list-style: none;
}

.app-sidebar-settings > summary::-webkit-details-marker {
    display: none;
}

.app-sidebar-settings > summary:hover,
.app-sidebar-settings[open] > summary {
    background: rgba(29, 29, 31, 0.055);
    color: #1d1d1f;
}

.app-settings-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgba(29, 29, 31, 0.045);
}

.app-settings-chevron {
    width: 15px !important;
    transition: transform 160ms ease;
}

.app-sidebar-settings[open] .app-settings-chevron {
    transform: rotate(180deg);
}

.app-settings-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    left: 0;
    z-index: 8;
    padding: 8px;
    border: 1px solid rgba(29, 29, 31, 0.11);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
}

.app-settings-panel-head {
    display: grid;
    gap: 2px;
    padding: 6px 8px 9px;
    border-bottom: 1px solid rgba(29, 29, 31, 0.08);
}

.app-settings-panel-head strong {
    font-size: 18px;
}

.app-settings-panel-head small {
    color: #86868b;
    font-size: 15px;
}

.app-settings-panel nav {
    max-height: min(450px, 58vh);
    display: grid;
    gap: 2px;
    padding: 6px 0;
    overflow-y: auto;
}

.app-settings-panel nav a {
    min-height: 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 11px;
    color: #515154;
    font-size: 18px;
}

.app-settings-panel nav a:hover,
.app-settings-panel nav a.active {
    background: #f2f2f5;
    color: #1d1d1f;
}

.app-settings-panel nav a.active {
    color: #0068d1;
    font-weight: 700;
}

.app-settings-panel nav a small {
    color: #9a9aa0;
    font-size: 14px;
}

.app-settings-logout {
    min-height: 50px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border-top: 1px solid rgba(29, 29, 31, 0.08);
    color: #d70015;
    font-size: 18px;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .app-project-sidebar .app-sidebar-brand-row {
        grid-template-columns: minmax(92px, 1fr) 36px;
        grid-template-rows: 44px 40px;
        gap: 3px;
        padding-right: 36px;
    }

    .app-project-sidebar .app-project-brand {
        grid-column: 1 / -1;
        width: 100%;
    }

    .app-project-user {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        height: 36px;
        grid-template-columns: 32px minmax(64px, 1fr);
        gap: 6px;
        padding: 2px 6px 2px 2px;
    }

    .app-project-create {
        grid-column: 2;
        grid-row: 2;
        width: 36px;
        height: 36px;
    }

    .app-project-sidebar .app-sidebar-toggle {
        position: absolute;
        top: 11px;
        right: 3px;
    }
}

/* ========================================================================== */
/* 案例五阶段顶部流程：顶部边缘唤出，覆盖式展示，不改变正文横向布局。         */
/* ========================================================================== */

.case-flow-edge {
    position: fixed;
    inset: 0 0 auto;
    z-index: 844;
    height: 12px;
}

.case-flowbar {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 845;
    width: min(1380px, calc(100vw - 112px));
    height: 78px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    background: rgba(245, 245, 247, 0.78);
    box-shadow: none;
    backdrop-filter: saturate(180%) blur(32px);
    -webkit-backdrop-filter: saturate(180%) blur(32px);
    transform: translate(-50%, -100%);
    transition:
        transform 220ms cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 160ms ease,
        box-shadow 220ms ease;
}

body.is-case-flow-revealed .case-flowbar {
    border-color: rgba(255, 255, 255, 0.84);
    box-shadow:
        inset 0 -1px 0 rgba(29, 29, 31, 0.055),
        0 18px 52px rgba(15, 23, 42, 0.14);
    transform: translate(-50%, 0);
}

.case-flowbar-inner {
    height: 61px;
    display: grid;
    grid-template-columns: minmax(170px, 0.8fr) minmax(0, 5.2fr);
    align-items: stretch;
    gap: 8px;
}

.case-flow-project {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.66);
    color: #1d1d1f;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 4px 14px rgba(0, 0, 0, 0.035);
}

.case-flow-project-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(145deg, #eaf4ff, #dceeff);
    color: #0071e3;
}

.case-flow-project svg,
.case-flow-toggle svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.case-flow-project strong {
    min-width: 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-flow-steps {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 17px;
    background: rgba(232, 232, 237, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        inset 0 0 0 1px rgba(29, 29, 31, 0.025);
}

.case-flow-step {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    border-radius: 13px;
    color: #6e6e73;
    transition:
        color 160ms ease,
        background-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.case-flow-step:not(:nth-child(7)) {
    border-right: 0;
}

.case-flow-step:hover {
    background: rgba(255, 255, 255, 0.72);
    color: #1d1d1f;
}

.case-flow-step.is-active {
    background: rgba(255, 255, 255, 0.96);
    color: #0068d1;
    box-shadow:
        inset 0 0 0 1px rgba(0, 113, 227, 0.1),
        0 5px 16px rgba(15, 23, 42, 0.09);
}

.case-flow-number {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(29, 29, 31, 0.055);
    color: #6e6e73;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.case-flow-step.is-complete .case-flow-number {
    background: rgba(52, 199, 89, 0.11);
    color: #248a3d;
}

.case-flow-step.is-active .case-flow-number {
    background: #0071e3;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 113, 227, 0.22);
}

.case-flow-step strong {
    min-width: 0;
    overflow: hidden;
    color: #1d1d1f;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.case-flow-step.is-active strong {
    color: #0068d1;
}

.case-flow-step > i {
    width: 6px;
    height: 6px;
    border: 0;
    border-radius: 50%;
    background: #c7c7cc;
}

.case-flow-step.is-complete > i {
    background: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.08);
}

.case-flow-step.is-active > i {
    background: #0071e3;
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.09);
}

.case-flow-progress {
    display: none;
}

.case-flow-progress i {
    width: var(--case-flow-progress);
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #0071e3, #5ac8fa);
}

.case-flow-toggle {
    position: absolute;
    right: calc(50% - 17px);
    bottom: -42px;
    width: 34px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 0 0 14px 14px;
    background: rgba(250, 250, 252, 0.88);
    color: #6e6e73;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 22px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    cursor: pointer;
    transition: bottom 220ms cubic-bezier(0.25, 0.8, 0.25, 1), color 150ms ease;
}

.case-flow-toggle:hover {
    color: #0071e3;
}

body.is-case-flow-revealed .case-flow-toggle {
    bottom: -22px;
}

body.is-case-flow-revealed .case-flow-toggle svg {
    transform: rotate(180deg);
}

body.has-case-flowbar .shell:not(.screen-shell) {
    padding-top: 44px;
}

@media (max-width: 1100px) {
    .case-flowbar {
        width: calc(100vw - 24px);
    }

    .case-flowbar-inner {
        grid-template-columns: 1fr;
    }

    .case-flow-project {
        display: none;
    }

    .case-flow-steps {
        grid-template-columns: repeat(7, minmax(190px, 1fr));
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .case-flow-steps::-webkit-scrollbar {
        display: none;
    }

    body.has-case-flowbar .app-sidebar ~ .shell:not(.screen-shell) {
        padding-top: 72px;
    }

}

@media (max-width: 680px) {
    .case-flowbar {
        width: calc(100vw - 12px);
        height: 78px;
        padding: 8px;
        border-radius: 0 0 22px 22px;
    }

    .case-flowbar-inner {
        height: 61px;
    }

    .case-flow-step {
        padding-right: 6px;
        padding-left: 6px;
    }

    body.has-case-flowbar .app-sidebar ~ .shell:not(.screen-shell) {
        padding-top: 68px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .case-flowbar,
    .case-flow-toggle {
        transition-duration: 0.01ms;
    }
}

/* 苹果式导航字体层级：导航醒目但不与页面标题、卡片标题争夺层级。 */
.app-sidebar,
.case-flowbar {
    font-family: var(--font-ui);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

.app-sidebar .brand {
    font-size: var(--type-card-title);
    font-weight: var(--weight-bold);
    line-height: var(--leading-card-title);
}

.app-sidebar-caption,
.app-projects-heading {
    font-size: var(--type-label);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-label);
}

.app-side-nav > a,
.app-sidebar-exit,
.app-sidebar-settings > summary,
.app-settings-panel nav a {
    font-size: var(--type-navigation);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-navigation);
}

.app-project-link strong,
.app-sidebar-user-copy strong,
.app-settings-panel-head strong {
    font-size: var(--type-body-large);
    font-weight: var(--weight-semibold);
    line-height: 22px;
}

.app-project-link small,
.app-sidebar-user-copy small,
.app-settings-panel-head small,
.app-settings-panel nav a small {
    font-size: var(--type-caption);
    font-weight: var(--weight-regular);
    line-height: var(--leading-caption);
}

.app-settings-logout {
    font-size: var(--type-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-body);
}

.app-sidebar-avatar {
    font-size: var(--type-label);
    font-weight: var(--weight-bold);
    line-height: var(--leading-label);
}

.case-flow-project strong,
.case-flow-step strong {
    font-family: var(--font-display);
    font-size: var(--type-navigation);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-navigation);
    letter-spacing: -0.015em;
}

.case-flow-number {
    font-size: var(--type-caption);
    font-weight: var(--weight-bold);
    line-height: var(--leading-caption);
}

body.is-app-sidebar-collapsed :is(.app-side-nav > a, .app-sidebar-profile, .app-sidebar-exit)[data-label]::after {
    font-size: var(--type-caption);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-caption);
}

.app-settings-panel nav a small.has-alert {
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff1d6;
    color: #8a5700;
    font-weight: var(--weight-semibold);
}

/* 设置导航进入后固定展示，返回任一案例页面时再切回案例流程。 */
.settings-flowbar {
    width: min(1420px, calc(100vw - 40px));
    transform: translate(-50%, 0);
    border-color: rgba(255, 255, 255, 0.84);
    box-shadow:
        inset 0 -1px 0 rgba(29, 29, 31, 0.055),
        0 18px 52px rgba(15, 23, 42, 0.14);
}

.settings-flowbar .case-flowbar-inner {
    grid-template-columns: minmax(150px, 0.68fr) minmax(0, 6.32fr);
}

.settings-flow-project .case-flow-project-icon {
    background: linear-gradient(145deg, #f1efff, #e4e1ff);
    color: #5856d6;
}

.settings-flow-steps {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.settings-flow-steps .case-flow-step {
    padding-right: 6px;
    padding-left: 6px;
}

body.has-settings-flowbar .shell:not(.screen-shell) {
    padding-top: 104px;
}

@media (max-width: 1100px) {
    .settings-flowbar .case-flowbar-inner {
        grid-template-columns: 1fr;
    }

    .settings-flow-steps {
        grid-template-columns: repeat(7, minmax(170px, 1fr));
    }

    body.has-settings-flowbar .app-sidebar ~ .shell:not(.screen-shell) {
        padding-top: 104px;
    }
}

@media (max-width: 680px) {
    body.has-settings-flowbar .app-sidebar ~ .shell:not(.screen-shell) {
        padding-top: 100px;
    }
}

/* ===== 头像三合一菜单（头像+用户名+设置 合并为一个图标） ===== */
.app-user-menu { position: relative; flex-shrink: 0; }
.app-user-menu > summary { list-style: none; cursor: pointer; display: inline-flex; border-radius: 50%; }
.app-user-menu > summary::-webkit-details-marker { display: none; }
.app-user-menu > summary:hover .app-sidebar-avatar,
.app-user-menu[open] > summary .app-sidebar-avatar,
.app-user-menu.is-current > summary .app-sidebar-avatar { box-shadow: 0 0 0 2px rgba(10, 132, 208, 0.45); }
.app-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    display: grid;
    gap: 2px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e5;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(29, 29, 31, 0.16);
    z-index: 140;
}
.app-user-menu-head { display: grid; padding: 4px 8px 8px; border-bottom: 1px solid #f0f0f3; margin-bottom: 4px; }
.app-user-menu-head strong { font-size: 13px; }
.app-user-menu-head small { color: #86868b; font-size: 11px; }
.app-user-menu-panel a { padding: 7px 8px; border-radius: 7px; font-size: 13px; color: #1d1d1f; text-decoration: none; }
.app-user-menu-panel a:hover, .app-user-menu-panel a.active { background: #f2f2f5; }
.app-user-menu-panel .app-user-menu-logout { color: #b3261e; }

/* ===== 系统级功能入口：与项目并列，绿色区分 ===== */
.app-system-entries { margin-top: auto; padding: 8px 10px 10px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.app-system-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
}
.app-system-entry:hover, .app-system-entry.active { background: rgba(27, 175, 122, 0.1); }
.app-system-entry-icon svg { width: 18px; height: 18px; stroke: #1baf7a; stroke-width: 1.7; fill: none; }
.app-system-entry-copy { display: grid; }
.app-system-entry-copy strong { font-size: 13px; color: #0b7a54; }
.app-system-entry-copy small { font-size: 11px; color: #86868b; }

/* 应用商店入口：紫色区分（原设置位置，位于系统功能区最底） */
.app-system-entry-store .app-system-entry-icon svg { stroke: #7b5bd6; }
.app-system-entry-store:hover, .app-system-entry-store.active { background: rgba(123, 91, 214, 0.1); }
.app-system-entry-store .app-system-entry-copy strong { color: #5b3fb8; }
/* 资源菜单中的表单按钮与原生菜单项观感一致 */
.app-resource-menu-form { margin: 0; display: contents; }

/* ===== 品牌行强制单行（用户要求：名称+新建+头像同一行，尺寸整体压缩） ===== */
.app-project-sidebar .app-sidebar-brand-row {
    height: 54px;
    flex-basis: 54px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.app-project-sidebar .app-project-brand {
    grid-column: unset;
    grid-row: unset;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.app-project-sidebar .app-project-brand-mark { width: 25px; height: 25px; flex: 0 0 25px; border-radius: 8px; }
.app-project-sidebar .app-project-brand-mark svg { width: 15px; height: 15px; }
.app-project-sidebar .app-project-brand-name {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-project-sidebar .app-project-create {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    min-width: 28px;
}
.app-project-sidebar .app-project-create svg { width: 14px; height: 14px; }
.app-project-sidebar .app-user-menu { flex: 0 0 auto; }
.app-project-sidebar .app-user-menu > summary .app-sidebar-avatar {
    width: 27px;
    height: 27px;
    font-size: 12px;
}
.app-project-sidebar .app-sidebar-brand-row .app-sidebar-toggle {
    flex: 0 0 auto;
    position: static;
    margin: 0;
}

/* 系统主页入口：蓝色区分 */
.app-system-entry-home .app-system-entry-icon svg { stroke: #0a84d0; }
.app-system-entry-home:hover, .app-system-entry-home.active { background: rgba(10, 132, 208, 0.1); }
.app-system-entry-home .app-system-entry-copy strong { color: #086cae; }

/* ------------------------------------------------ 白板完全授权档位选择 */
.app-auto-execute-levels {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 2px;
}

.app-auto-execute-level {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(60, 60, 67, 0.18);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.app-auto-execute-level:hover {
    background: rgba(0, 122, 255, 0.05);
}

.app-auto-execute-level:has(input:checked) {
    border-color: rgba(0, 122, 255, 0.55);
    background: rgba(0, 122, 255, 0.07);
}

.app-auto-execute-level.is-risky:has(input:checked) {
    border-color: rgba(255, 59, 48, 0.55);
    background: rgba(255, 59, 48, 0.07);
}

.app-auto-execute-level input {
    margin-top: 3px;
    flex: none;
}

.app-auto-execute-level span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.app-auto-execute-level strong {
    font-weight: 600;
}

.app-auto-execute-level em {
    font-style: normal;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(60, 60, 67, 0.62);
}


/* 资源库折叠分组(2026-09-01):知识库/样板库/应用商店三项带副标题很占地方,
   收进一个默认收起的「资源库」;当前正停在组内页面时模板直接渲染成展开。 */
.app-system-group > summary {
    cursor: pointer;
    list-style: none;
}

.app-system-group > summary::-webkit-details-marker {
    display: none;
}

.app-system-group-summary .app-system-entry-icon svg {
    stroke: #6e6e73;
}

.app-system-group-summary .app-system-entry-copy strong {
    color: #1d1d1f;
}

.app-system-group-arrow {
    width: 16px;
    height: 16px;
    margin-left: auto;
    flex: none;
    fill: none;
    stroke: #86868b;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 150ms ease;
}

.app-system-group[open] > summary .app-system-group-arrow {
    transform: rotate(180deg);
}

/* 组内项缩进一格,层级一眼可见 */
.app-system-group > a {
    padding-left: 22px;
}

/* 项目内容平铺，资源类型由图标和悬停说明区分。 */
.app-project-flat-resources { min-height: 8px; border-radius: 10px; }
.app-project-flat-resources.is-drag-over { background: rgba(0, 113, 227, .08); outline: 1px dashed #0071e3; }
.app-project-create-actions { border-top: 1px solid rgba(60, 60, 67, .08); margin-top: 4px; padding-top: 4px; }

/* 系统提示独立于内容区，不覆盖导航，不随页面网格被拉高。 */
.app-sidebar ~ .flash-stack {
    position: fixed;
    inset: 20px 16px auto auto;
    z-index: 880;
    width: min(390px, calc(100vw - 32px));
    height: auto;
    max-height: min(240px, 40dvh);
    margin: 0;
    align-content: start;
    grid-auto-rows: max-content;
    overflow: auto;
}
.app-sidebar ~ .flash-stack .flash {
    min-width: 0;
    height: auto;
    align-self: start;
}
.app-sidebar ~ .flash-stack .flash > span {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* 矮窗口或放大页面时，系统入口自己滚动，保留项目列表空间。 */
.app-project-sidebar .app-system-entries {
    flex: 0 1 auto;
    min-height: 0;
    max-height: max(60px, calc(100% - 188px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-sample-list{flex:none;max-height:24vh;overflow:auto;padding:0 8px}.app-sample-list .app-project-link{display:flex;justify-content:space-between;gap:8px}.app-sample-list span{min-width:0;overflow-wrap:anywhere}.app-sample-list small{flex:none;color:#17548f;font-size:11px}

.app-sidebar-pin{flex:0 0 28px;width:28px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:#6e6e73;cursor:pointer}.app-sidebar-pin svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}.app-sidebar-pin[aria-pressed=true]{color:#0071e3;background:#e6f0ff}.app-sidebar-pin:focus-visible{outline:2px solid #0071e3}@media(min-width:1101px){body.is-app-sidebar-pinned{--app-sidebar-width:var(--app-sidebar-expanded)}body.is-app-sidebar-pinned .app-sidebar{transform:translateX(0)}}@media(max-width:1100px){.app-sidebar-pin{display:none}}

@media(min-width:1101px){body.is-app-sidebar-pinned .app-sidebar ~ .shell:not(.screen-shell){width:calc(100vw - var(--app-sidebar-expanded) - 48px);margin-left:calc(var(--app-sidebar-expanded) + 24px);margin-right:24px}body.is-app-sidebar-pinned .app-sidebar ~ .shell.screen-shell{margin-left:var(--app-sidebar-expanded);width:calc(100vw - var(--app-sidebar-expanded))}}

.app-transfer-entry{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;width:100%;min-height:46px;margin:8px 0 12px;border:0;border-radius:13px;background:#0071e3;color:white;font:inherit;font-size:14px;font-weight:600;box-shadow:0 5px 14px #0071e32a;cursor:pointer}.app-transfer-entry span{font-size:23px}.app-transfer-entry:focus-visible{outline:3px solid #74b6ff;outline-offset:2px}