/* 引入字体 */
/*  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');  */

/* 全局 CSS 变量定义 */
:root {
    --bg: #f4f6fb;               /* 背景色：淡蓝色 */
    --panel: #ffffff;            /* 面板背景色：白色 */
    --muted: #6b7280;            /* 灰色文本色 */
    --accent: #0b6ef6;           /* 强调色：蓝色 */
    --accent-2: #7cc3ff;         /* 次要强调色：浅蓝色 */
    --surface-border: rgba(15,23,42,0.06); /* 面板边框颜色：淡灰色 */
    --shadow: 0 8px 24px rgba(11,22,45,0.06); /* 阴影效果：浅灰色 */
}
 .fullscreen-bg {
            position: fixed;  /* 固定背景 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('bg.jpg'); /* 替换成你的图片路径 */
            background-size: cover; /* 让图片充满屏幕 */
            background-position: center; /* 让图片居中 */
            background-repeat: no-repeat; /* 不重复图片 */
            background-attachment: fixed; /* 背景图片固定 */
            z-index: -1; /* 确保图片在其他内容的下面 */
        }
/* 设置根字体大小，使用 Viewport 单位，确保字体大小自适应 */
html {
    font-size: clamp(14px, 1.5vw, 25px); /* 视口宽度变化时自适应字体大小，范围在 14px 到 20px 之间 */
}

/* 通用样式 */
* {
    box-sizing: border-box; /* 所有元素使用 border-box 盒模型，包含内边距和边框在内 */
}

/* 设置 body 的样式 */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; /* 设置字体 */
    margin: 0; /* 去除 body 的默认外边距 */
    background: var(--bg); /* 使用自定义的背景色 */
    color: #0f1724; /* 主文本颜色：深色 */
    line-height: 1.6; /* 设置行高，增加可读性 */
    
}

/* 页面容器样式 */
.container {
    max-width: 100%; /* 最大宽度为 100% */
    margin: 40 15px; /* 上下边距为 40px，左右边距为 15px */
    padding: 22px; /* 内边距 22px */
}

/* 幻灯片容器 - 用于展示全屏和瀑布流模式 */
.slides {
    position: relative;
    max-width: 94vw; /* 宽度为视口宽度的 90% */
    margin-left: 3vw; /* 左外边距为视口宽度的 5% */
    margin-right: 3vw; /* 右外边距为视口宽度的 5% */
}

/* 幻灯片 - 支持瀑布流布局 */
.slide {
    position: relative;
    box-sizing: border-box;
    padding: clamp(6px, 2.5vw, 10px); /* 内边距自适应 */
    display: block;
}

/* 全屏幻灯片 - `ppt-slide` 使用固定定位，覆盖整个屏幕 */
.ppt-slide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 高度为视口高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('bg.jpg'); /* 替换成你的图片路径 */
    z-index: 40; /* 设置 z-index，确保在其他元素之上 */
    padding: clamp(12px, 4vw, 20px); /* 内边距自适应 */
    background-size: cover; /* 让图片充满屏幕 */
    background-position: center; /* 让图片居中 */
    background-repeat: no-repeat; /* 不重复图片 */
    background-attachment: fixed; /* 背景图片固定 */
}

/* 隐藏幻灯片 */
.ppt-slide.ppt-hidden {
    display: none; /* 隐藏幻灯片 */
}

/* PPT 幻灯片内容宽度设置 */
.ppt-slide .section {
    max-width: 80%; /* 最大宽度为 80% */
    text-align: center; /* 内容居中 */
}

/* 目录样式 */
.ppt-slide .toc {
    align-items: center; /* 目录居中对齐 */
}

.ppt-slide .toc a {
    margin: 8px 0; /* 增加目录链接之间的间距 */
}

/* 幻灯片过渡效果 */
.slide-transition {
    transition: transform 0.45s ease, opacity 0.35s ease; /* 设置平滑过渡效果 */
}

/* 回到封面按钮 */
.back-to-cover {
    position: fixed;
    top: 18px;
    right: 18px;
    background: var(--panel); /* 背景色为面板颜色 */
    border: 1px solid var(--surface-border); /* 边框颜色为面板边框颜色 */
    padding: 8px 12px; /* 内边距 */
    border-radius: 8px; /* 圆角效果 */
    box-shadow: var(--shadow); /* 阴影效果 */
    cursor: pointer; /* 设置鼠标指针为点击状态 */
    z-index: 60; /* 设置较高的 z-index，确保在其他元素之上 */
    display: none; /* 默认隐藏，通过 JavaScript 控制显示 */
}

/* 回到封面按钮按下时的效果 */
.back-to-cover:active {
    transform: translateY(1px); /* 按钮按下时轻微下移 */
}

/* 进度指示器 */
.progress {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* 居中显示 */
    bottom: 18px; /* 底部 18px */
    display: flex;
    gap: 8px; /* 子元素之间的间距 */
    z-index: 6;
}

/* 进度点样式 */
.dot {
    width: 10px;
    height: 10px;
    border-radius: 999px; /* 圆形 */
    background: rgba(2, 6, 23, 0.06); /* 背景色为浅灰色 */
    transition: all 0.2s; /* 设置平滑过渡效果 */
}

/* 激活状态的进度点 */
.dot.active {
    width: 22px; /* 增加宽度 */
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); /* 渐变背景色 */
    box-shadow: 0 8px 20px rgba(11, 110, 246, 0.12); /* 阴影效果 */
}

/* 页面顶部卡片样式 */
.section {
    background: var(--panel); /* 背景色为面板颜色 */
    border: 1px solid var(--surface-border); /* 边框颜色为面板边框颜色 */
    border-radius: 12px; /* 圆角效果 */
    padding: clamp(12px, 1.8vw, 20px); /* 内边距自适应 */
    margin: 0 auto 20px; /* 上下外边距自适应 */
    box-shadow: var(--shadow); /* 阴影效果 */
    max-width: clamp(640px, 92vw, 1400px); /* 最大宽度范围 */
    width: 100%; /* 宽度为 100% */
    box-sizing: border-box; /* 包含内边距和边框在内 */
}

/* 标题部分 */
.header {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 子元素之间的间距 */
}

.title {
    font-size: 2rem; /* 设置标题字体大小 */
    color: var(--accent); /* 标题颜色为强调色 */
    margin: 0; /* 去除外边距 */
}

.meta {
    color: var(--muted); /* 元数据颜色为灰色 */
    font-size: 1.3rem; /* 设置字体大小 */
}

/* 目录样式 */
.toc {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 目录项之间的间距 */
}

.toc a {
    display: inline-block;
    padding: 10px 14px; /* 内边距 */
    background: linear-gradient(180deg, #fbfdff, #f4f7ff); /* 渐变背景色 */
    border-radius: 8px; /* 圆角效果 */
    border: 1px solid var(--surface-border); /* 边框颜色 */
    text-decoration: none; /* 去除链接的下划线 */
    color: #08315f; /* 链接文字颜色 */
    font-size: 1.3rem; /* 设置字体大小 */
}

/* 两列布局 */
.two-column {
    display: flex; /* 使用 flexbox 布局 */
    gap: 10px; /* 列之间的间距 */
    align-items: stretch; /* 让列项对齐 */
    flex-wrap: wrap; /* 超出屏幕时换行 */
}

/* 每列的卡片最小宽度50px，防止列过窄 */
.two-column .card {
    flex: 0 1 calc(50% - 9px); /* 每列占50%的宽度，减去9px间距 */
    min-width: 50px; /* 最小宽度50px */
    box-sizing: border-box; /* 包括边框和内边距 */
}

/* 三列布局 */
.three-column {
    display: flex; /* 使用 flexbox 布局 */
    gap: 8px; /* 列之间的间距 */
    align-items: flex-start; /* 列项顶部对齐 */
    flex-wrap: wrap; /* 超出屏幕时换行 */
}

/* 每列的卡片最小宽度50px，防止列过窄 */
.three-column .card {
    flex: 0 1 calc(33.333% - 12px); /* 每列占33.333%的宽度，减去12px间距 */
    min-width: 50px; /* 最小宽度50px */
    box-sizing: border-box; /* 包括边框和内边距 */
}

/* 卡片基本样式 */
.card {
    background: var(--panel); /* 卡片背景色 */
    border: 1px solid var(--surface-border); /* 卡片边框 */
    border-radius: 10px; /* 卡片圆角 */
    padding: clamp(8px, 1.6vw, 16px); /* 内边距，适配不同屏幕大小 */
    box-shadow: var(--shadow); /* 卡片阴影效果 */
}

/* 指标卡 */
.metrics-row {
    display: flex; /* 水平排列指标卡 */
    gap: 12px; /* 卡片之间的间距 */
    margin-top: 12px; /* 上边距 */
}

.metric {
    flex: 1; /* 每个指标卡占一行 */
    background: linear-gradient(180deg, #fff, #fbfdff); /* 渐变背景色 */
    border: 1px solid var(--surface-border); /* 边框 */
    border-radius: 10px; /* 圆角 */
    padding: 12px; /* 内边距 */
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直方向排列 */
    justify-content: center; /* 垂直居中 */
    align-items: flex-start; /* 左对齐 */
}

.metric .value {
    font-size: 1.25rem; /* 设置数值字体大小 */
    color: var(--accent); /* 数值颜色 */
    font-weight: 700; /* 加粗字体 */
}

.metric .label {
    font-size: 1rem; /* 标签字体大小 */
    color: var(--muted); /* 标签颜色 */
    margin-top: 6px; /* 上边距 */
}

/* 停机损失专用样式 */
.kpi-grid {
    display: flex; /* 水平排列 */
    gap: 12px; /* 卡片间距 */
    margin-top: 12px; /* 上边距 */
}

.kpi {
    flex: 1; /* 每个 KPI 卡片占一行 */
    background: linear-gradient(180deg, #fff, #fbfdff); /* 渐变背景色 */
    border: 1px solid var(--surface-border); /* 边框 */
    border-radius: 10px; /* 圆角 */
    padding: 12px; /* 内边距 */
    display: flex; /* 使用 flexbox 布局 */
    flex-direction: column; /* 垂直方向排列 */
    justify-content: center; /* 垂直居中 */
    align-items: flex-start; /* 左对齐 */
}

.kpi .num {
    font-size: 1.4rem; /* 数字字体大小 */
    color: var(--accent); /* 数字颜色 */
    font-weight: 800; /* 数字加粗 */
}

.kpi .desc {
    font-size: 0.85rem; /* 描述字体大小 */
    color: var(--muted); /* 描述颜色 */
    margin-top: 6px; /* 上边距 */
}

/* 影响列表 */
.impact-list {
    margin-top: 10px; /* 上边距 */
    display: flex; /* 垂直排列影响项 */
    flex-direction: column; /* 垂直排列 */
    gap: 8px; /* 每项之间的间距 */
}

.impact-item {
    display: flex; /* 每项影响项 */
    flex-direction: column; /* 垂直排列 */
}

.impact-item .label-row {
    display: flex; /* 水平排列标签行 */
    justify-content: space-between; /* 标签两端对齐 */
    font-size: 0.875rem; /* 字体大小 */
}

/* 进度条样式 */
.progress-bar {
    width: 100%; /* 进度条宽度100% */
    height: 10px; /* 高度10px */
    background: rgba(15, 23, 42, 0.06); /* 背景颜色 */
    border-radius: 999px; /* 圆角 */
    overflow: hidden; /* 溢出隐藏 */
    margin-top: 6px; /* 上边距 */
}

.progress-fill {
    height: 100%; /* 填充进度条的高度 */
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); /* 渐变填充色 */
    border-radius: 999px; /* 圆角 */
}

/* 图表容器样式 */

/* chart 容器：固定高度，canvas 填充，避免初始化重排导致下移 */
/* .chart-wrap 是包裹图表的容器 */
.chart-wrap {
    padding: 8px; /* 容器内边距为 8px */
    background: transparent; /* 背景透明 */
    display: flex; /* 使用 Flexbox 布局 */
    align-items: center; /* 垂直居中对齐容器内的内容 */
    width: 100%; /* 容器宽度 */
    aspect-ratio: 16/9; /* 设置容器的宽高比为 16:9，确保宽度和高度的比例固定 */
    max-height: clamp(270px, 30vh, 420px); /* 容器的最大高度在 160px 和 420px 之间，且高度随屏幕高度的变化而变化，最大值为 420px，最小值为 160px */
}

/* canvas 元素 */
canvas {
    width: 100%; /* canvas 宽度填满父容器 */
    height: 100%; /* canvas 高度填满父容器 */
    display: block; /* 移除默认的 inline-block 行为，确保占满父容器的所有空间 */
    object-fit: contain; /* 保持图像的比例填充容器，且不会被裁剪，可能会留空白 */
}


/* 设置表格布局为固定布局，确保列宽一致 */
.section table {
    width: 100%;
    table-layout: auto; /* 允许自动调整列宽 */
    border-collapse: collapse; /* 表格合并边框 */
    border: 2px solid #f2f2f2; /* 外围边框颜色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 为表格添加阴影 */
    border-radius: 8px; /* 圆角边框 */
    overflow: hidden; /* 超出部分隐藏 */
}

/* 表格容器，允许在小屏幕上水平滚动 */
.section table-wrapper {
    overflow-x: auto; /* 允许水平滚动 */
    -webkit-overflow-scrolling: touch; /* 在 iOS 上启用平滑滚动 */
    margin: 0 auto; /* 保证在容器内居中 */
}

/* 设置表头样式 */
.section table th {
    background-color: #4CAF50; /* 表头背景色 */
    color: white; /* 表头文字颜色 */
    padding: 10px 15px; /* 更大的内边距 */
    text-align: center; /* 居中对齐 */
    font-weight: bold; /* 加粗文字 */
    font-size: 18px; /* 调整字体大小 */
    border-bottom: 2px solid #ddd; /* 表头底部边框 */
}

/* 设置单元格样式 */
.section table td {  
    padding: 10px 15px; /* 更大的内边距 */
    border: 1px solid #ddd; /* 边框颜色 */
    text-align: center; /* 居中对齐 */
    font-size: 16px; /* 调整字体大小 */
    background-color: #fafafa; /* 单元格背景色 */
    word-wrap: break-word; /* 防止长单词超出单元格 */
}

/* 鼠标悬停时单元格变色 */
.section table tr:hover td {
    background-color: #f1f1f1; /* 悬停时的背景色 */
    cursor: pointer; /* 鼠标样式 */
}

/* 添加分页符或其他控件样式 */
.section table td, .section table th {
    border-left: 1px solid #e0e0e0; /* 每列之间的细边框 */
}

/* 美化最后一列和最后一行的边框 */
.section table tr:last-child td {
    border-bottom: 2px solid #ddd; /* 最后一行的下边框 */
}

.section table th:last-child, .section table td:last-child {
    border-right: 2px solid #ddd; /* 最后一列的右边框 */
}



/* Slides container side padding to ensure content never touches viewport edges */
/* .slides 类样式 */


/* 链接与按钮样式 */
a {
    color: var(--accent); /* 链接颜色 */
    text-decoration: none; /* 移除下划线 */
}

a:hover {
    text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

/* 小字号文字 */
.small {
    font-size: 0.9rem; /* 设置字体大小 */
    color: var(--muted); /* 设置文字颜色为禁用色 */
}

/* 响应式设计部分 */
/* 以下是针对更小的屏幕（<=736px）进行优化的样式 */
@media (max-width: 736px) {

    /* .slides 类在小屏幕下的样式 */
    .slides {
        position: relative; /* 设为相对定位 */
        max-width: 98vw; /* 最大宽度为视口宽度的90% */
        margin-left: 1vw; /* 左外边距设为视口宽度的3% */
        margin-right: 1vw; /* 右外边距设为视口宽度的3% */
    }

    /* .section 类的样式调整 */
    .section {
        padding: 12px; /* 内边距调整为12px */
        margin-bottom: 14px; /* 下边距调整为14px */
    }

    /* .title 类的标题字体大小调整 */
    .title {
        font-size: 1.25rem; /* 设置标题字体大小为1.25rem */
    }

    /* .metrics-row 类调整为垂直布局 */
    .metrics-row {
        flex-direction: column; /* 改为垂直排列 */
    }

    /* .metric 类的宽度调整为100% */
    .metric {
        width: 100%; /* 指标卡宽度占满父容器 */
    }

    /* .kpi-grid 类调整为垂直布局 */
    .kpi-grid {
        flex-direction: column; /* 垂直排列停机损失卡 */
    }

    /* 三列和两列卡片样式调整为单列布局 */
    .three-column .card, .two-column .card {
        flex: 1 1 80%; /* 宽度占80%，允许自适应 */
        min-width: 0; /* 最小宽度为0 */
    }

    /* .chart-wrap 类调整图表的宽高比 */
    .chart-wrap {
        aspect-ratio: 4/3; /* 图表设置为4:3的宽高比，适应窄屏 */
    }

}
/* 针对更小的屏幕（如手机）优化字体和内边距 */
@media (max-width: 768px) {
    .section table th, .section table td {
        font-size: 0.75rem; /* 更小的字体适应小屏幕 */
        padding: 6px; /* 更小的内边距 */
    }
    
    /* 强制表格适应容器，避免超出 */
    .section table {
        max-width: 100%;
        overflow-x: auto;
        display: block; /* 强制表格为块级元素 */
    }
}

        #content {
            display: none; /* 初始隐藏内容 */
        }
        #passwordPrompt {
            text-align: center;
            margin-top: 100px;
        }
		#intro-text {
            position: absolute;
            bottom: 0;
			text-align: center;
			margin-top: 85%;
			font-size: 40px; /* 默认字体大小 */
			font-family: 'Arial', sans-serif; /* 设置字体 */
			font-weight: bold; /* 设置加粗 */
			color: #4A90E2; /* 设置文字颜色 */
			text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 添加文字阴影 */
			letter-spacing: 1px; /* 增加字间距 */
			line-height: 1.4; /* 调整行高，增强可读性 */
			padding: 10px 20px; /* 增加内边距，让文字不紧贴边缘 */
			background: linear-gradient(45deg, #ff6a00, #ee0979); /* 渐变背景 */
			-webkit-background-clip: text; /* 让渐变背景只作用于文字 */
			color: transparent; /* 将文字颜色设置为透明，显示渐变效果 */
		}

        /* 针对小屏幕的调整 */
       @media (max-width: 768px) {
        #intro-text {
			 font-size: 20px; /* 小屏幕上调整字体大小 */
			 margin-top: 40%;  /* 小屏幕上边距 */
        }
        }