/* =========================================
   page.css - 通用一体化画框样式
   抄自首页 .home 的画框结构,所有子页面共用
   ========================================= */

/* ===== 一体化画框(完全对齐首页 .home)===== */
.page {
    display: flex;
    flex-direction: column;
    background: white;
    /* 手机端:占满整个视口 */
    height: 100vh;
    height: 100dvh;
    /* 防止内部内容溢出导致画框被撑开 */
    overflow: hidden;
    position: relative;
}

/* 画框内的内容区:自适应占满剩余空间,可滚动 */
.page-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* 内容区底部留点安全距离 */
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* 默认占满父级高度,方便内部 flex 子项用 flex:1 平分 */
    display: flex;
    flex-direction: column;
}

/* ===== 桌面端 - 模拟手机壳(完全对齐首页 .home)===== */
@media (min-width: 480px) {
    html, body {
        background: linear-gradient(135deg, #f0f0f3 0%, #e8e8ed 100%);
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
    }

    .page {
        max-width: 420px;
        width: 100%;
        height: 90vh;
        max-height: 880px;
        margin: 0;
        background: white;
        border-radius: 24px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        position: relative;
    }
}

/* ===== 减弱动效 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}