/* 夏日留言板 v3 - 基础重置、CSS 变量与时段主题 */
/* ==================== 基础重置与变é‡?==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    /* 夏日清凉配色 */
    --bg-primary: #F0FFFE;
    --bg-secondary: #E0F7FA;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.72);
    
    --mdb-primary: #4DD0E1;
    --mdb-light: #80DEEA;
    --mdb-dark: #0097A7;
    
    --fjd-primary: #FF8A65;
    --fjd-light: #FFAB91;
    --fjd-dark: #E64A19;
    
    --sky-blue: #64B5F6;
    --lemon-yellow: #FFF176;
    --lavender: #B2EBF2;
    
    --text-primary: #0D2B3E;
    --text-secondary: #4A6572;
    --text-tertiary: #90A4AE;
    --text-muted: #78909C;
    
    --shadow-soft: 0 4px 20px rgba(77, 208, 225, 0.08);
    --shadow-card: 0 8px 32px rgba(13, 43, 62, 0.06);
    --shadow-fab: 0 6px 24px rgba(77, 208, 225, 0.35);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.08);
    
    /* 头部实测高度（标题栏 + 心情栏），由 12-header-height.js 运行时写入。
       这里的值只是首屏渲染的兜底，避免 JS 执行前内容被固定头部压住。 */
    --header-h: 124px;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-theme: 1s ease-in-out;

    /* 主题装饰色（随时段变化，默认清晨ďź?*/
    --accent-1: #80DEEA;
    --accent-2: #FFF176;
    --accent-3: #64B5F6;
    --blob-opacity: 0.42;

    /* 心情状态栏：左蓝右橘渐变，与白底卡片形成质感区分 */
    --mood-gradient: linear-gradient(135deg,
        rgba(77, 208, 225, 0.18) 0%,
        rgba(255, 241, 118, 0.14) 50%,
        rgba(255, 138, 101, 0.18) 100%);
    --mood-glow: 0 6px 20px rgba(77, 208, 225, 0.16);
    --mood-inset: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    --mood-topglow: rgba(255, 255, 255, 0.45);
    --mood-divider: rgba(0, 0, 0, 0.08);
    --mood-ring: rgba(0, 0, 0, 0.15);

}

/* ==================== 时段主题：海风清ć™?06:00-11:59 ==================== */
html[data-theme="morning"] {
    --bg-primary: #F0FFFE;
    --bg-secondary: #E0F7FA;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.75);
    --text-primary: #0D2B3E;
    --text-secondary: #4A6572;
    --text-tertiary: #90A4AE;
    --text-muted: #78909C;
    --accent-1: #80DEEA;
    --accent-2: #A5D6A7;
    --accent-3: #64B5F6;
    --blob-opacity: 0.40;

    --mood-gradient: linear-gradient(135deg,
        rgba(77, 208, 225, 0.18) 0%,
        rgba(165, 214, 167, 0.15) 50%,
        rgba(255, 138, 101, 0.18) 100%);
    --mood-glow: 0 6px 20px rgba(77, 208, 225, 0.16);

}

/* ==================== 时段主题：骄阳午ĺ?12:00-17:59 ==================== */
html[data-theme="afternoon"] {
    --bg-primary: #FDFFFE;
    --bg-secondary: #F0FAF9;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 255, 255, 0.75);
    --text-primary: #1A3340;
    --text-secondary: #3D5A6A;
    --text-tertiary: #90AABB;
    --text-muted: #7B9BAA;
    --accent-1: #FFD54F;
    --accent-2: #4DD0E1;
    --accent-3: #80DEEA;
    --blob-opacity: 0.42;

    --mood-gradient: linear-gradient(135deg,
        rgba(77, 208, 225, 0.20) 0%,
        rgba(100, 181, 246, 0.15) 50%,
        rgba(255, 138, 101, 0.20) 100%);
    --mood-glow: 0 6px 20px rgba(100, 181, 246, 0.18);

}

/* ==================== 时段主题：落日余ć™?18:00-21:59 ==================== */
html[data-theme="evening"] {
    --bg-primary: #FFF8F0;
    --bg-secondary: #FFF3E0;
    --bg-card: #FFFFFF;
    --bg-glass: rgba(255, 252, 245, 0.75);
    --text-primary: #3E1F0A;
    --text-secondary: #6D4732;
    --text-tertiary: #C4996F;
    --text-muted: #A87850;
    --accent-1: #FF8A65;
    --accent-2: #FFD54F;
    --accent-3: #FF7043;
    --blob-opacity: 0.44;

    --mood-gradient: linear-gradient(135deg,
        rgba(77, 208, 225, 0.16) 0%,
        rgba(255, 224, 130, 0.20) 50%,
        rgba(255, 138, 101, 0.20) 100%);
    --mood-glow: 0 6px 20px rgba(255, 138, 101, 0.18);

}

/* ==================== 时段主题：深夜海ć´?22:00-05:59（暗色）==================== */
html[data-theme="night"] {
    --bg-primary: #0A1929;
    --bg-secondary: #0D2137;
    --bg-card: #132338;
    --bg-glass: rgba(10, 30, 50, 0.75);
    --text-primary: #D4E8F0;
    --text-secondary: #8AB4C8;
    --text-tertiary: #4A7A94;
    --text-muted: #345E72;
    --accent-1: #00838F;
    --accent-2: #1565C0;
    --accent-3: #006064;
    --blob-opacity: 0.28;
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
    --skeleton-base: #0D2137;
    --skeleton-shine: #163652;
    --hairline: rgba(255, 255, 255, 0.06);
    --chip-bg: rgba(255, 255, 255, 0.05);

    --mood-gradient: linear-gradient(135deg,
        rgba(92, 107, 192, 0.24) 0%,
        rgba(121, 134, 203, 0.18) 50%,
        rgba(159, 168, 218, 0.20) 100%);
    --mood-glow: 0 6px 20px rgba(92, 107, 192, 0.24);
    --mood-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --mood-topglow: rgba(255, 255, 255, 0.22);
    --mood-divider: rgba(255, 255, 255, 0.08);
    --mood-ring: rgba(255, 255, 255, 0.15);

}




html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    /* 全部使用系统字体：iPhone 走苹方、小米走 MiSans、鸿蒙走 HarmonyOS Sans。
       原先首位是远程的 'Noto Sans SC'（Google Fonts），在国内网络下不可达且
       阻塞首屏渲染，已移除远程加载；这里保留 Noto/思源作为已装该字体设备的候选。 */
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'HarmonyOS Sans SC',
                 'MiSans', 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei',
                 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    /* iOS Safari 的 100vh 按「地址栏收起后」计算，实际可视区更矮，底部内容会被
       工具栏压住、并多出一段可滚动区。dvh 实时跟随，旧内核不认时自动回退到 vh。 */
    min-height: 100vh;
    min-height: 100dvh;
    /* 防止下拉刷新与 iOS 橡皮筋联动导致整页跟着晃（第 4 条） */
    overscroll-behavior-y: contain;
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition-theme), color var(--transition-theme);
}

/* 时段主题切换时，主要区块平滑过渡 */
.header, .message-card, .sheet, .skeleton-card,
.btn-load-more, .toast, .onboarding, .spring-bg,
.bg-blob, .password-input {
    transition: background var(--transition-theme),
                background-color var(--transition-theme),
                color var(--transition-theme),
                border-color var(--transition-theme),
                box-shadow var(--transition-theme);
}


.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

@media (min-width: 768px) {
    .container {
        max-width: 640px;
        padding: 0 24px;
    }
}