.layout-shell-header,
.layout-shell-footer {
    width: 100%;
}

body[data-shell-variant="home"] {
    --home-fixed-header-height: 108px;
}

body[data-shell-variant="home"] .layout-shell-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 320;
}

body[data-shell-variant="home"] .layout-shell-header .navbar {
    position: relative;
    top: auto;
}

body[data-shell-variant="home"] .wall-page {
    padding-top: calc(var(--home-fixed-header-height) + 20px);
}

body[data-shell-variant="home"] .layout-shell-header .navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -14px;
    height: 18px;
    background: linear-gradient(180deg, rgba(255, 148, 191, 0.18), rgba(255, 148, 191, 0));
    pointer-events: none;
}

.layout-shell-header .navbar {
    min-height: 92px;
}

.layout-shell-header .navbar-inner {
    max-width: none;
    width: 100%;
    min-height: 92px;
    padding: 12px clamp(16px, 2vw, 30px);
    gap: 12px;
}

.layout-shell-header .nav-brand {
    margin-left: 2px;
}

.layout-shell-header .nav-actions {
    margin-right: 2px;
}

.layout-shell-header .nav-brand h1 {
    margin: 0 0 2px 0;
    font-size: clamp(1.36rem, 1.2vw + 1rem, 1.6rem);
}

.layout-shell-header .nav-subtitle {
    margin: 0;
    font-size: 0.84rem;
}

.layout-shell-footer .wall-footer {
    margin-top: 20px;
}

.layout-shell-header .auth-user {
    gap: 10px;
}

.layout-shell-header .navbar-points-link {
    min-width: 62px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 14px;
    color: #c94a85;
    border-color: rgba(244, 188, 212, 0.72);
    background: rgba(255, 255, 255, 0.56);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.layout-shell-header .navbar-points-link:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(238, 150, 191, 0.82);
}

body[data-shell-variant="project"],
body[data-shell-variant="project"] #app {
    min-height: 100dvh;
}

body[data-shell-variant="project"] #app {
    display: flex;
    flex-direction: column;
}

body[data-shell-variant="project"] .page-container {
    flex: 1;
}

body[data-shell-variant="project"] .layout-shell-footer {
    margin-top: auto;
}

body[data-shell-variant="project"] .layout-shell-footer .wall-footer {
    margin: 0 auto 20px;
}

@media (max-width: 700px) {
    body[data-shell-variant="home"] {
        --home-fixed-header-height: 92px;
    }

    .layout-shell-header .navbar {
        min-height: 80px;
    }

    .layout-shell-header .navbar-inner {
        min-height: 80px;
        padding: 10px 12px;
    }

    .layout-shell-header .nav-brand h1 {
        font-size: 1.22rem;
    }

    .layout-shell-header .nav-subtitle {
        font-size: 0.74rem;
    }
}

/* --- 面包屑导航统一样式 (复用于 Project 及后续如 Gallery 页面) --- */
.wall-breadcrumb-nav {
    display: flex;
    align-items: center;
    background: var(--white, #ffffff);
    border-bottom: 1px solid var(--medium-gray, #e5e7eb);
}

.wall-breadcrumb-inner {
    max-width: 1560px;
    width: 100%;
    margin: 0 auto;
    padding: 0.25rem clamp(12px, 2.4vw, 28px);
    display: flex;
    align-items: center;
}

/* --- 移动端头部及菜单的共享覆盖 (< 860px) --- */
@media (max-width: 860px) {
    body[data-shell-variant="home"] {
        --home-fixed-header-height: 60px;
    }

    .layout-shell-header .navbar {
        height: 60px !important;
        min-height: 60px !important;
    }

    .layout-shell-header .navbar-inner {
        display: flex !important;
        height: 60px !important;
        min-height: 60px !important;
        padding: 0 12px !important;
        align-items: center;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        gap: 8px;
    }

    .layout-shell-header .nav-brand {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* 当页面属于需要左侧侧边快捷菜单时（或者带 fixed 悬浮 toggle 时），标题需要让出紧贴的左边距 */
    body[data-shell-variant="project"] .layout-shell-header .nav-brand,
    body[data-shell-variant="gallery"] .layout-shell-header .nav-brand,
    .has-mobile-menu .layout-shell-header .nav-brand {
        padding-left: 44px;
    }

    .layout-shell-header .nav-brand h1 {
        font-size: 1.08rem;
        margin: 0;
    }

    .layout-shell-header .nav-subtitle {
        display: none;
    }

    .layout-shell-header .nav-actions {
        margin-left: auto;
        flex: 0 0 auto;
        white-space: nowrap;
        display: flex !important;
        align-items: center;
        width: auto !important;
        grid-template-columns: none !important;
        justify-content: flex-end;
        gap: 8px;
    }

    .layout-shell-header .nav-actions #btnEnterProject {
        min-height: 32px !important;
        font-size: 0.8rem;
        padding: 6px 10px !important;
        width: auto !important;
        margin-right: 0 !important;
    }

    .layout-shell-header .auth-user {
        position: relative;
        padding: 4px;
        border-radius: 999px;
        min-width: 0;
        gap: 0;
        flex-wrap: nowrap;
        display: inline-flex;
    }

    .layout-shell-header .nav-actions #navbarUser {
        width: auto !important;
        display: inline-flex !important;
        grid-template-columns: none !important;
        grid-column: auto !important;
        grid-row: auto !important;
        padding: 4px !important;
        justify-self: auto !important;
    }

    .layout-shell-header .auth-user .user-meta {
        display: none;
    }

    .layout-shell-header .auth-user #navbarLogout {
        display: none !important;
    }

    .layout-shell-header .auth-user .navbar-points-link {
        display: none !important;
    }

    .layout-shell-header .auth-user #navbarAvatar {
        width: 32px;
        height: 32px;
        cursor: pointer;
        border: 1px solid rgba(210, 215, 224, 0.95);
    }

    /* 右侧头像下拉退出菜单 */
    .mobile-user-menu {
        position: fixed;
        right: 12px;
        top: 66px;
        z-index: 230;
        min-width: 92px;
        border-radius: 10px;
        border: 1px solid rgba(217, 223, 234, 0.9);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 10px 20px rgba(35, 42, 62, 0.16);
        padding: 6px;
        display: none;
    }

    .mobile-user-menu.active {
        display: block;
    }

    .mobile-user-menu-btn {
        width: 100%;
        min-height: 34px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #303543;
        font-size: 0.9rem;
        font-weight: 600;
        text-align: center;
        cursor: pointer;
    }

    .mobile-user-menu-btn:hover {
        background: rgba(245, 247, 252, 0.96);
    }

    .mobile-user-menu-btn.is-primary {
        color: #c94a85;
    }

    /* 左侧移动端下拉菜单和触发按钮统一垂直位置 (针对带有移动端侧栏的页面兼容) */
    .mobile-menu-toggle {
        top: 13px !important;
        left: 12px !important;
        z-index: 220;
        width: 34px !important;
        height: 34px !important;
        border-color: rgba(208, 213, 222, 0.9) !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    .mobile-menu-panel {
        top: 66px !important;
        left: 12px !important;
        width: min(280px, calc(100vw - 24px)) !important;
    }
}