/* ==================== 布局 ==================== */
.app {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg-page);
    position: relative;
}

.page { display: none; animation: slideIn 0.25s ease; padding-bottom: 30px; }
.page.active { display: block; }
.page.no-page-animation { animation: none !important; }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==================== 手势返回模式 ==================== */
/* 进入手势期间:当前页 + 上一页 同时绝对定位叠加显示 */
.app.swiping .page.swipe-current,
.app.swiping .page.swipe-prev {
    display: block !important;
    animation: none !important;
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    min-height: 100vh;
    background: var(--bg-page);
    will-change: transform;
}
.app.swiping .page.swipe-prev {
    z-index: 1;
    box-shadow: none;
}
.app.swiping .page.swipe-current {
    z-index: 2;
    box-shadow: -8px 0 24px rgba(0,0,0,0.12);
}
/* 手势"完成返回"的滑出动画 */
.page.swipe-finish {
    transition: transform 0.22s cubic-bezier(0.25, 0.8, 0.4, 1) !important;
}
/* 手势"取消(弹回)"的回弹动画 */
.page.swipe-cancel {
    transition: transform 0.18s cubic-bezier(0.25, 0.8, 0.4, 1) !important;
}
/* 边缘热区(辅助调试时可加 background 看位置) */
.swipe-edge-hint {
    position: fixed;
    top: 0; left: 0;
    width: 30px; height: 100vh;
    z-index: 999;
    pointer-events: none;
}

/* ==================== 顶栏 (子页面) ==================== */
.nav-bar {
    display: flex; align-items: center;
    padding: 14px 16px;
    background: var(--bg-page);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(245, 245, 247, 0.65);
}
.nav-back {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-primary); font-size: 22px;
    transition: background 0.15s;
}
.nav-back:active { background: var(--bg-hover); }
.nav-title {
    font-size: 17px; font-weight: 600;
    margin-left: 4px;
}