/* ==========================================================================
   ARTICLE V2 · 人体工学与书卷级高级感阅读界面 (Ergonomic & Editorial Calm UI)
   ==========================================================================
   设计原则：
   1. 首屏黄金比例：严格保持 260px~330px 紧凑居中 Hero Banner 与 1.65rem 标题，
      确保 PC 首屏一眼同时呈现 Banner、00 导语总览卡与左侧专家吸顶栏。
   2. 视觉人体工学：採用低眩光云石浅灰底色 (#f3f5f8) + 纯净微暖白卡 (#ffffff) +
      深灰蓝标题 (#1e293b) + 温和炭灰正文 (#334155) + 书卷蓝 (#2b4c7e) 与哑光金 (#b48a2c)。
      支持「柔和白 / 暖米色 / 夜间模式」三态护眼切换与「标准 / 大字」字号记忆。
   3. 结构化微交互：分章卡片微立体悬浮阴影、表格行级高亮、五步应急卡序号徽标、
      FAQ 问答合一卡、行动清单合一卡、右下角平滑回顶与移动端悬浮目录抽屉。
   ========================================================================== */

body.blog-detail-page.v2 {
    --page-bg: #f3f5f8;
    --card-bg: #ffffff;
    --soft-box-bg: #f8fafc;
    --soft-header-bg: #eef2f6;
    --text-title: #1e293b;
    --text-body: #334155;
    --text-muted: #64748b;
    --border-soft: #e2e8f0;
    --border-lighter: #edf2f7;
    --accent-calm: #2b4c7e;
    --accent-gold-soft: #b48a2c;
    --accent-tint: #f0f4f9;
    --radius-lg: 14px;
    --radius-md: 10px;
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.03), 0 8px 24px -4px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.05), 0 14px 32px -6px rgba(15, 23, 42, 0.06);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.blog-detail-page.v2.theme-warm {
    --page-bg: #f2efe9;
    --card-bg: #faf8f5;
    --soft-box-bg: #f3f0e8;
    --soft-header-bg: #ebe6dc;
    --text-title: #222933;
    --text-body: #363e4a;
    --text-muted: #6e6a61;
    --border-soft: #dfd9cd;
    --border-lighter: #e8e3d9;
    --accent-calm: #2c4a6f;
    --accent-gold-soft: #9e751e;
    --accent-tint: #efeae0;
}

body.blog-detail-page.v2.theme-night {
    --page-bg: #111822;
    --card-bg: #1a2330;
    --soft-box-bg: #202b3a;
    --soft-header-bg: #263344;
    --text-title: #e6edf5;
    --text-body: #c5d1de;
    --text-muted: #8b9bb0;
    --border-soft: #2c3a4e;
    --border-lighter: #243040;
    --accent-calm: #7da6d8;
    --accent-gold-soft: #d4ad54;
    --accent-tint: #212f40;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* ---------- 顶部阅读进度条：书卷蓝至哑光金温和渐变 ---------- */
body.v2 #reading-progress {
    height: 3px !important;
    background: linear-gradient(90deg, var(--accent-calm) 0%, var(--accent-gold-soft) 100%) !important;
}

/* ---------- 1. HERO BANNER：严格保持黄金紧凑比例 (260px-330px) 与居中磨砂胶囊 ---------- */
body.v2 .flow-hero {
    min-height: 260px !important;
    max-height: 330px !important;
    padding: 88px 20px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

body.v2 .flow-hero::before {
    background: linear-gradient(
        to top,
        rgba(15, 23, 42, 0.93) 0%,
        rgba(15, 23, 42, 0.74) 52%,
        rgba(15, 23, 42, 0.46) 100%
    ) !important;
}

body.v2 .flow-hero-title {
    font-size: 1.65rem !important;
    line-height: 1.38 !important;
    letter-spacing: 0.015em !important;
    max-width: 900px !important;
    margin: 0 auto 14px !important;
    text-align: center !important;
}

body.v2 .article-meta-info {
    gap: 10px 14px !important;
    justify-content: center !important;
}

body.v2 .article-meta-info span {
    background: rgba(255, 255, 255, 0.11) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    font-size: 0.82rem !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* ---------- 2. 双栏人体工学网格 (270px 吸顶侧栏 + 模块化分章阅读流) ---------- */
body.v2 .article-layout.centered-layout {
    grid-template-columns: 270px minmax(0, 1fr) !important;
    gap: 32px !important;
    max-width: 1220px !important;
    margin: 28px auto 64px !important;
    padding: 0 20px !important;
    align-items: start !important;
}

body.v2 .expert-profile-card,
body.v2 .reading-mode-card,
body.v2 .toc-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--border-soft) !important;
    background: var(--card-bg) !important;
    padding: 18px !important;
}

body.v2 .profile-avatar {
    width: 78px !important;
    height: 78px !important;
    object-fit: cover !important;
    object-position: center 18% !important;
    border: 3px solid var(--soft-header-bg) !important;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}

body.v2 .profile-contact-btn {
    border-radius: 8px !important;
    padding: 9px 0 !important;
    background: var(--accent-calm) !important;
    box-shadow: 0 2px 6px rgba(43, 76, 126, 0.18) !important;
    transition: transform 0.15s ease, opacity 0.2s ease !important;
}

body.v2 .profile-contact-btn:hover {
    transform: translateY(-1px) !important;
    opacity: 0.95 !important;
}

body.v2.theme-night .profile-contact-btn {
    color: #0f172a !important;
}

/* 护眼与字号切换器按钮人体工学触控优化 */
body.v2 .mode-btn {
    padding: 5px 10px !important;
    font-size: 0.76rem !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

body.v2 .mode-btn.active {
    background: var(--accent-calm) !important;
    border-color: var(--accent-calm) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

body.v2.theme-night .mode-btn.active {
    color: #0f172a !important;
}

/* 侧栏目录人体工学行距与激活指示 */
body.v2 .toc-list li a {
    padding: 7px 11px !important;
    border-radius: 7px !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    transition: all 0.18s ease !important;
}

body.v2 .toc-list li a:hover,
body.v2 .toc-list li a.active-toc {
    background: var(--accent-tint) !important;
    color: var(--accent-calm) !important;
    border-left-color: var(--accent-gold-soft) !important;
    font-weight: 600 !important;
    transform: translateX(2px);
}

/* ---------- 3. 右侧分章卡片流：书卷级呼吸感与层次 ---------- */
body.v2 .modular-stream-col {
    gap: 22px !important;
}

body.v2 .overview-lead-card,
body.v2 .calm-chapter-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-card) !important;
    border: 1px solid var(--border-soft) !important;
    background: var(--card-bg) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

body.v2 .overview-lead-card:hover,
body.v2 .calm-chapter-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

body.v2 .overview-lead-card {
    padding: 26px 36px 28px !important;
    border-top: 3px solid var(--accent-calm) !important;
}

body.v2 .overview-lead-card .article-lead {
    background: var(--accent-tint) !important;
    border: 1px solid var(--border-soft) !important;
    border-left: 4px solid var(--accent-gold-soft) !important;
    border-radius: 10px !important;
    padding: 18px 22px !important;
}

body.v2 .overview-lead-card .article-lead p {
    font-size: 0.99rem !important;
    line-height: 1.88 !important;
    letter-spacing: 0.01em !important;
}

body.v2 .calm-chapter-card {
    padding: 34px 42px 38px !important;
}

body.v2 .calm-chapter-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid var(--border-soft) !important;
}

body.v2 .calm-chapter-num {
    background: var(--accent-tint) !important;
    color: var(--accent-calm) !important;
    border: 1px solid var(--border-soft) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    letter-spacing: 0.04em !important;
}

body.v2 .calm-chapter-title {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.01em !important;
    color: var(--text-title) !important;
}

/* ---------- 4. 正文排版：人体工学行高与舒适视幅 ---------- */
body.v2 .calm-chapter-body {
    font-size: 17px !important;
    line-height: 1.9 !important;
    letter-spacing: 0.012em !important;
    color: var(--text-body) !important;
}

body.v2.size-large .calm-chapter-body {
    font-size: 18.8px !important;
    line-height: 1.96 !important;
}

body.v2 .calm-chapter-body p {
    margin: 0 0 18px 0 !important;
    text-indent: 2em !important;
}

body.v2 .calm-chapter-body strong {
    color: var(--text-title) !important;
    font-weight: 600 !important;
}

body.v2 .calm-chapter-body h3 {
    font-size: 1.16rem !important;
    font-weight: 600 !important;
    color: var(--text-title) !important;
    margin: 28px 0 14px 0 !important;
    padding: 4px 0 4px 12px !important;
    border-left: 3px solid var(--accent-gold-soft) !important;
    background: linear-gradient(90deg, var(--accent-tint) 0%, transparent 85%) !important;
    border-radius: 0 6px 6px 0 !important;
}

/* ---------- 5. 实拍配图框与图注 ---------- */
body.v2 .image-center {
    margin: 28px auto !important;
    padding: 14px !important;
    background: var(--soft-box-bg) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease !important;
}

body.v2 .image-center:hover {
    border-color: #cbd5e1 !important;
}

body.v2 .image-center img {
    border-radius: 8px !important;
    transition: transform 0.25s ease !important;
}

body.v2 .image-caption {
    font-size: 0.86rem !important;
    color: var(--text-muted) !important;
    margin-top: 12px !important;
    padding: 0 12px !important;
    line-height: 1.55 !important;
}

/* ---------- 6. 参数对账表：温和灰蓝表头 + 悬停行高亮 ---------- */
body.v2 .table-container {
    border-radius: 10px !important;
    border: 1px solid var(--border-soft) !important;
    margin: 26px 0 !important;
    overflow-x: auto !important;
}

body.v2 .data-table th {
    background: var(--soft-header-bg) !important;
    color: var(--text-title) !important;
    font-weight: 600 !important;
    padding: 13px 16px !important;
    border-bottom: 2px solid var(--border-soft) !important;
}

body.v2 .data-table td {
    padding: 12px 16px !important;
    line-height: 1.68 !important;
}

body.v2 .data-table td:first-child {
    font-weight: 600 !important;
    color: var(--text-title) !important;
}

body.v2 .data-table tbody tr:hover td {
    background: var(--accent-tint) !important;
}

/* ---------- 7. 现场异常故障应急处置五步法 (.calm-step-item) ---------- */
body.v2 .checklist {
    counter-reset: emergency-step;
    gap: 14px !important;
}

body.v2 .calm-step-item {
    counter-increment: emergency-step;
    position: relative;
    background: var(--soft-box-bg) !important;
    border: 1px solid var(--border-soft) !important;
    border-left: 4px solid var(--accent-calm) !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

body.v2 .calm-step-item:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* ---------- 8. 第07章 FAQ 全宽合一问答卡 & 第08章 行动清单合一卡 ---------- */
body.v2 .unified-faq-item {
    border-radius: 10px !important;
    border: 1px solid var(--border-soft) !important;
    margin-bottom: 16px !important;
}

body.v2 .unified-faq-item .faq-question {
    background: var(--soft-header-bg) !important;
    color: var(--text-title) !important;
    padding: 15px 20px !important;
}

body.v2 .unified-action-card {
    border-radius: 10px !important;
    border: 1px solid var(--border-soft) !important;
    border-left: 4px solid var(--accent-gold-soft) !important;
    background: var(--soft-box-bg) !important;
    padding: 18px 22px !important;
}

/* ---------- 9. 悬浮快捷操作球 (平滑回顶 & 移动端目录抽屉) ---------- */
.v2-fab {
    position: fixed;
    right: 24px;
    bottom: 28px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-fab button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--card-bg);
    color: var(--accent-calm);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    font-size: 0.95rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.v2-fab button:hover {
    background: var(--accent-calm);
    color: #ffffff;
    border-color: var(--accent-calm);
}

.v2-fab button.show {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.v2-fab .v2-toc-btn {
    display: none;
}

/* ---------- 10. 移动端响应式适配 (<= 991px) ---------- */
@media (max-width: 991px) {
    body.v2 .flow-hero {
        min-height: 210px !important;
        padding: 75px 16px 22px !important;
    }
    body.v2 .flow-hero-title {
        font-size: 1.35rem !important;
        margin-bottom: 10px !important;
    }
    body.v2 .article-layout.centered-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 20px !important;
    }
    body.v2 .sidebar-column {
        position: static !important;
        max-height: none !important;
    }
    body.v2 .overview-lead-card,
    body.v2 .calm-chapter-card {
        padding: 22px 20px !important;
    }
    body.v2.toc-open .toc-card {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        bottom: 84px !important;
        z-index: 9500 !important;
        max-height: 62vh !important;
        overflow-y: auto !important;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.28) !important;
    }
    .v2-fab .v2-toc-btn {
        display: flex;
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}