/* ============================================================
   青隅 · 只此青绿 —— 全局样式表
   每一处文字都有独立选择器，可直接修改字体/大小/颜色/粗细
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- 加载动画 ---- */
.page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #1A2622; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; }
.page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-spinner { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #BFA870; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 画卷底层 ---- */
body { font-family: "思源柔黑体", "方正细圆体", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif; color: #D8DCD5; line-height: 1.8; padding-bottom: 120px; margin: 0; background: url('/uploads/mountain-bg.jpg') no-repeat center center fixed; background-size: cover; }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(26,38,34,0.45); z-index: -1; pointer-events: none; }

/* 各页面纱层 */
body.page-home::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(60,107,90,0.06); z-index: -1; pointer-events: none; }
body.page-about::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(45,79,66,0.08); z-index: -1; pointer-events: none; }
body.page-service::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(191,168,112,0.04); z-index: -1; pointer-events: none; }
body.page-meditation::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(90,130,110,0.06); z-index: -1; pointer-events: none; }
body.page-contact::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(200,190,170,0.04); z-index: -1; pointer-events: none; }

.container { max-width: 640px; margin: 0 auto; min-height: 100vh; overflow-x: hidden; background: transparent; }

/* ---- 板块结构 ---- */
section { padding: 64px 32px; position: relative; overflow: hidden; background: rgba(255,255,255,0.02); }
section:nth-child(even) { background: rgba(255,255,255,0.03); }
section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(191,168,112,0.3), transparent); }

/* 页尾退晕 */
.section-tail { padding-bottom: 80px; }
.page-home .section-tail { background: linear-gradient(180deg, transparent 0%, rgba(60,107,90,0.25) 100%); }
.page-about .section-tail { background: linear-gradient(180deg, transparent 0%, rgba(45,79,66,0.3) 100%); }
.page-service .section-tail { background: linear-gradient(180deg, transparent 0%, rgba(191,168,112,0.2) 100%); }
.page-meditation .section-tail { background: linear-gradient(180deg, transparent 0%, rgba(90,130,110,0.25) 100%); }
.page-contact .section-tail { background: linear-gradient(180deg, transparent 0%, rgba(200,190,170,0.2) 100%); }

/* ============================================================
   文字体系 —— 每一类文字独立控制
   ============================================================ */

/* 一级标题：页面主标题、首页大标题 */
.hero-main-title,
.page-hero-content h2,
section > h2:first-of-type:not(.section-title) {
    font-family: "江南细宋体", "Noto Serif SC", "Times New Roman", serif;
    font-size: 28px;
    font-weight: 700;
    color: #E8E5DF;
    letter-spacing: 2px;
    text-align: center;
}

/* 二级标题：板块标题 */
.section-title {
    font-family: "江南细宋体", "Noto Serif SC", "Times New Roman", serif;
    font-size: 22px;
    font-weight: 400;
    color: #E8E5DF;
    letter-spacing: 1px;
}
.section-title:after { content: ''; display: block; width: 60px; height: 1px; background: #BFA870; margin: 14px auto 0; }

/* 板块副标题 */
.section-subtitle {
    font-size: 13px;
    color: #A8B8AE;
    letter-spacing: 1px;
}

/* 三级标题：卡片内小标题 */
h3 {
    font-family: "江南细宋体", "Noto Serif SC", "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;
    color: #D4C5A0;
}
.meditation-intro h3,
.case-card h3,
.review-card h3 { font-size: 18px; font-weight: 400; color: #D4C5A0; }

/* 套餐卡片内标题（付费点） */
.plan-card h4,
.service-page h4,
h4 {
    font-family: "江南细宋体", "Noto Serif SC", "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: #D4C5A0;
}

/* 正文内容 */
p,
.case-section-text,
.review-body,
.consultant-style,
.meditation-intro p {
    font-size: 15px;
    font-weight: 400;
    color: #D8DCD5;
    line-height: 1.8;
}

/* 注释、辅助文字 */
.case-note,
.review-target,
.consultant-served,
.tag,
.day-meta,
.faq-item p {
    font-size: 13px;
    color: #A8B8AE;
}

/* 按钮文字 */
.btn-primary,
.btn-secondary {
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 400;
}

/* 价格数字 */
.price,
.plan-card .price {
    font-size: 28px;
    font-weight: 500;
    color: #BFA870;
}
.price small { font-size: 16px; color: #A8B8AE; }

/* 导师名字 */
.consultant-name {
    font-family: "江南细宋体", "Noto Serif SC", "Times New Roman", serif;
    font-size: 20px;
    font-weight: 700;
    color: #D4C5A0;
}

/* 导师经验 */
.consultant-exp {
    font-size: 16px;
    color: #BFA870;
}

/* 导师标签 */
.consultant-label {
    font-size: 11px;
    font-weight: 700;
    color: #A8B8AE;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* 问题列表 */
.problem-item strong {
    font-size: 15px;
    color: #E8E5DF;
}
.problem-item span {
    font-size: 15px;
    color: #A8B8AE;
}

/* 首页副标题（Banner下方小字） */
.hero-subtitle {
    font-size: 16px;
    color: rgba(232,229,223,0.8);
}
.hero-footer-text {
    font-size: 13px;
    color: rgba(232,229,223,0.6);
}

/* 品牌标语区（关于页顶部） */
.brand-tagline {
    font-size: 14px;
    color: #BFA870;
    font-style: italic;
}

/* 案例标签 */
.case-tag {
    font-size: 11px;
    font-weight: 500;
    color: #D4C5A0;
}

/* 案例分区小标题 */
.case-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #D8DCD5;
}

/* FAQ */
.faq-item h3 {
    font-size: 15px;
    font-weight: 600;
    color: #D4C5A0;
}

/* 页脚 */
.site-footer p {
    font-size: 15px;
    color: #BFA870;
    letter-spacing: 1px;
    text-align: center;
}

/* 首页核心价值区小标题 */
.value-item h3 {
    font-size: 18px;
    font-weight: 400;
    color: #D4C5A0;
}
.value-item p {
    font-size: 14px;
    color: #D8DCD5;
}

/* 步骤编号 */
.step-num {
    font-size: 20px;
    font-weight: 700;
    color: #1A2622;
    background: #BFA870;
}
.step h4 { font-size: 15px; color: #E8E5DF; }
.step p { font-size: 13px; color: #A8B8AE; }

/* 数字展示 */
.number-value {
    font-size: 28px;
    font-weight: 700;
    color: #BFA870;
}
.number-label {
    font-size: 13px;
    color: #A8B8AE;
}

/* 强调文字 */
strong { color: #E8E5DF; font-weight: 600; }

/* ============================================================
   按钮
   ============================================================ */
.btn-primary { display: inline-block; padding: 14px 40px; background: transparent; color: #D4C5A0; text-decoration: none; border-radius: 4px; border: 1px solid #BFA870; transition: all 0.3s ease; }
.btn-primary:hover { background: #BFA870; color: #1A2622; }
.btn-secondary { display: inline-block; padding: 12px 32px; background: transparent; border: 1px solid #9BB8A5; color: #9BB8A5; text-decoration: none; border-radius: 4px; transition: all 0.3s ease; }
.btn-secondary:hover { background: #9BB8A5; color: #1A2622; }

/* ============================================================
   卡片
   ============================================================ */
.meditation-intro, .plan-card, .day-card, .case-card, .review-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(191,168,112,0.2); border-radius: 2px; padding: 24px; margin-bottom: 16px; backdrop-filter: blur(6px); }
.problem-item { padding: 14px 0; border-bottom: 1px solid rgba(191,168,112,0.15); cursor: pointer; transition: all 0.3s; background: rgba(255,255,255,0.02); }
.problem-item:hover { padding-left: 8px; background: rgba(255,255,255,0.06); }

/* ============================================================
   导航
   ============================================================ */
.tab-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 640px; background: rgba(26,38,34,0.92); backdrop-filter: blur(10px); border-top: 1px solid rgba(191,168,112,0.2); display: flex; justify-content: space-around; padding: 14px 0; z-index: 100; }
.tab-nav a { text-decoration: none; color: #A8B8AE; font-size: 16px; font-weight: 600; display: flex; flex-direction: column; align-items: center; }
.tab-nav a.active { color: #BFA870; }

/* ============================================================
   首页Banner
   ============================================================ */
.home-hero { background: linear-gradient(180deg, rgba(45,79,66,0.5) 0%, rgba(26,38,34,0.3) 100%); min-height: 45vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-main-title { text-shadow: 0 2px 12px rgba(0,0,0,0.4); }

/* ============================================================
   导师区
   ============================================================ */
.sec-consultants { background: rgba(26,38,34,0.3); }
.consultant-row { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; }
.consultant { flex: 1; min-width: 180px; max-width: 260px; text-align: center; }
.consultant img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 2px; border: 1px solid rgba(191,168,112,0.2); }
.audio-play-btn { width: 44px; height: 44px; border: 1px solid #BFA870; background: transparent; color: #BFA870; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; transition: all 0.3s; margin: 12px auto; }
.audio-play-btn:hover { background: #BFA870; color: #1A2622; }

/* ============================================================
   弹窗
   ============================================================ */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; }
.modal-content { background: rgba(26,38,34,0.95); border: 1px solid #BFA870; padding: 32px; width: 90%; max-width: 400px; border-radius: 2px; backdrop-filter: blur(10px); }
.form-group { margin-bottom: 16px; }
.form-group label { color: #E8E5DF; font-size: 14px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(191,168,112,0.2); color: #E8E5DF; border-radius: 2px; font-size: 14px; }
.form-group input:focus, .form-group textarea:focus { border-color: #BFA870; outline: none; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 480px) {
    .hero-main-title { font-size: 26px; }
}

/* 咨询风格段落文字（独立控制） */
.consultant-style-text {
    font-size: 14px;      /* 可改 */
    color: #D8DCD5;       /* 可改 */
    line-height: 1.7;     /* 可改 */
}



/* 擅长领域标签文字（独立控制，唯一生效） */
.consultant-tags span {
    font-size: 16px;
    color: #D8DCD5;
    font-weight: 400;
    border: 2px solid rgba(191,168,112,0.3);
    padding: 4px 14px;
    border-radius: 5px;
}

/* ============================================================
   音乐控制按钮（右下角固定，极简青隅风格）
   ============================================================ */
.music-toggle {
    position: fixed;
    bottom: 100px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 1px solid #BFA870;
    border-radius: 50%;
    background: rgba(26,38,34,0.85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
    transition: all 0.3s ease;
    color: #BFA870;
    font-size: 18px;
}
.music-toggle:hover {
    background: #BFA870;
    color: #1A2622;
}
.music-toggle.playing {
    border-color: #9BB8A5;
    color: #9BB8A5;
}
.music-toggle.playing:hover {
    background: #9BB8A5;
    color: #1A2622;
}

/* SPA 单页应用：区块切换 */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* 案例弹窗 */
#story-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 300; align-items: center; justify-content: center; }
#story-modal.active { display: flex; }
#story-modal-content { background: rgba(26,38,34,0.95); border: 1px solid #BFA870; border-radius: 2px; padding: 28px; width: 90%; max-width: 420px; max-height: 80vh; overflow-y: auto; backdrop-filter: blur(10px); }

/* 梳理卡弹窗 */
#card-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 200; align-items: center; justify-content: center; }
#card-modal.active { display: flex; }
.modal-content { background: rgba(26,38,34,0.95); border: 1px solid #BFA870; border-radius: 2px; padding: 32px; width: 90%; max-width: 400px; backdrop-filter: blur(10px); }

/* ============================================================
   音乐呼吸光晕动画
   ============================================================ */
.music-toggle {
    transition: all 0.4s ease;
}
.music-toggle.playing {
    animation: breatheGlow 2s ease-in-out infinite;
    border-color: #D4C5A0;
    color: #D4C5A0;
}
@keyframes breatheGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212,197,160,0.6);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(212,197,160,0);
    }
}

/* ============================================================
   按钮交互——全局按压反馈
   ============================================================ */
.btn-primary:active,
.btn-secondary:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease;
}
.tab-nav a:active {
    transform: scale(0.9);
    transition: transform 0.1s ease;
}

/* ============================================================
   Tab 切换动画——淡入上移
   ============================================================ */
.tab-content {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
}
.tab-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============================================================
   弹窗淡入淡出
   ============================================================ */
/* 梳理卡弹窗 */
#card-modal {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
#card-modal.active {
    opacity: 1;
    pointer-events: auto;
}
/* 案例弹窗 */
#story-modal {
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
#story-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   案例弹窗内按钮样式适配
   ============================================================ */
.story-tag {
    display: inline-block;
    background: rgba(212,197,160,0.15);
    color: #D4C5A0;
    padding: 4px 12px;
    border-radius: 2px;
    font-size: 12px;
    margin-bottom: 14px;
}

/* ========== 背景图片稳定渲染（修复 iOS 微信闪现 + 电脑端铺满） ========== */
body {
    background-attachment: scroll !important;       /* 弃用 fixed，避免 iOS 微信渲染错乱 */
    background-size: cover !important;             /* 始终铺满视口 */
    background-position: center center !important; /* 始终居中显示 */
    background-repeat: no-repeat !important;
}

/* 安卓微信环境下强制隐藏音乐按钮（不依赖 JS） */
@media screen and (max-width: 1000px) {
    .music-toggle[style*="display: none"] { display: none !important; }
}