/* =========================================================
   样式变量、重置、App 外框与页面容器
   源文件行号：8-50
   ========================================================= */

:root {
    --bg-color: #F8F6F0;
    --card-bg: #FFFFFF;
    --text-main: #33312E;
    --text-sub: #66635E;
    --text-light: #999690;
    --accent-gold: #B99A6B;
    --accent-dark: #3E3A36;
    --accent-red: #B15A4A;
    --accent-green: #4A8B5C;
    --border-color: #EBE7DF;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --vip-gradient: linear-gradient(135deg, #F2D89E, #D4B87E);
    --vip-text: #6B4C1A;
    --wx-mu: #3D8B6E;
    --wx-huo: #C1503C;
    --wx-tu: #C29A4E;
    --wx-jin: #8A8F98;
    --wx-shui: #3A5F8A;
    --safe-top: max(54px, env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
    font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
    background-color: #E5E5E5;
    display: flex; justify-content: center; align-items: center;
    min-height: 100vh; color: var(--text-main);
}

#app {
    width: 390px; height: 844px; background-color: var(--bg-color);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    border-radius: 40px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border: 10px solid #1A1A1A;
}

.page { display: none; flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 80px; scrollbar-width: none; position: relative; }
.page.active { display: block; }
.page::-webkit-scrollbar { display: none; }
.content-padding { padding: 0 20px; }

/* =========================================================
   移动端安全区：iPhone 灵动岛 / 刘海 / 底部 Home 指示条
   （桌面预览 env() 为 0，不影响现有布局）
   ========================================================= */

@media (max-width: 430px) {
    body { display: block; align-items: stretch; }
    #app {
        width: 100vw; height: 100dvh; min-height: 100dvh;
        border-radius: 0; border: none; box-shadow: none;
    }
}

@supports (padding: env(safe-area-inset-top)) {
    /* 所有页面顶部统一预留灵动岛 / 状态栏空间 */
    .home-header,
    .profile-header,
    .subpage-header,
    .records-header,
    .studio-header,
    .masters-header,
    .notes-list-header,
    .notes-header,
    .page-header,
    .cal-top,
    .note-detail-header,
    .compose-header,
    .reader-header,
    .board-top {
        padding-top: var(--safe-top);
    }

    /* 底部安全区 */
    .bottom-nav {
        height: calc(65px + env(safe-area-inset-bottom));
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
    .page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* 顶部安全区最终覆盖：页面样式中的 padding 简写会覆盖基础规则 */
.home-header,
.profile-header,
.subpage-header,
.records-header,
.studio-header,
.masters-header,
.notes-list-header,
.notes-header,
.page-header,
.cal-top,
.note-detail-header,
.compose-header,
.reader-header,
.board-top {
    padding-top: var(--safe-top) !important;
}

/* 防止移动端横向滚动容器把页面撑宽 */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
#app { max-width: 100vw; }