/* 全局样式 */
body {
    font-family: 'PingFang SC', Arial, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 20px;
    text-align: center; /* 让容器内元素默认居中 */
}

/* 标题样式 */
h1, h2 {
    color: #0056b3;
    text-align: center;
}

h2 {
    margin-top: 30px;
    margin-bottom: 15px;
}

/* 段落和列表样式 */
p, li {
    text-align: left; /* 保持段落和列表左对齐 */
    margin-bottom: 10px;
}

ol, ul {
    padding-left: 40px; /* 列表缩进 */
    text-align: left;
}

/* 按钮样式 */
button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 12px 25px; /* 增大按钮 padding */
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-top: 25px; /* 增大按钮上边距 */
    display: inline-block; /* 允许居中 */
}

button:hover {
    background-color: #0056b3;
}

/* 特定界面样式 */
#welcome-screen, #consent-screen, #end-screen {
    padding: 20px;
}

/* 限时阅读提示界面样式 */
#time-pressure-alert {
    padding: 40px;
    border: 2px solid #f0ad4e;
    background-color: #fcf8e3;
    border-radius: 8px;
}
#time-pressure-alert h2 {
    color: #8a6d3b;
}
#time-pressure-alert ul {
    list-style-type: none; /* 移除默认列表标记 */
    padding-left: 0;
}
#time-pressure-alert li {
    text-align: center; /* 列表项居中 */
    margin-bottom: 8px;
}
#time-pressure-alert p {
    text-align: center; /* 倒计时文本居中 */
    margin-top: 20px;
    font-weight: bold;
}

/* 注视点样式 (修改版：确保全屏居中) */
#fixation-cross {
    display: flex;             /* 使用 Flexbox 布局 */
    justify-content: center;   /* 水平居中 */
    align-items: center;       /* 垂直居中 */
    position: fixed;           /* 固定定位，脱离文档流，覆盖整个屏幕 */
    top: 0;
    left: 0;
    width: 100vw;              /* 宽度等于视口宽度 */
    height: 100vh;             /* 高度等于视口高度 */
    background-color: #f5f5f5; /* 设置背景色以覆盖下方内容 (与body背景色一致) */
    z-index: 100;              /* 确保在其他内容之上 */
    font-size: 80px;           /* '+' 大小 */
    font-weight: bold;
    color: #333;
    /* 移除可能存在的固定 height 属性，如 height: 200px; */
}

/* 倒计时样式 */
#timer {
    font-size: 24px;
    font-weight: bold;
    color: #e74c3c;
    margin-bottom: 20px;
    text-align: center; /* 居中显示 */
}

/* 处理信息样式 */
#treatment-info-timed, #treatment-info-untimed {
    font-size: 16px;
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    text-align: center; /* 居中显示 */
}

/* 新闻文本容器样式 */
#news-text-1-timed, #news-text-2-timed,
#news-text-1-untimed, #news-text-2-untimed {
    margin-top: 20px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    text-align: left; /* 新闻内容左对齐 */
}

/* 新闻标题样式 */
#news-text-1-timed h3, #news-text-2-timed h3,
#news-text-1-untimed h3, #news-text-2-untimed h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    font-size: 1.2em;
}

/* 不限时组的“我已阅读完毕”按钮 */
#finish-reading-button {
    display: block; /* 块级元素 */
    margin: 30px auto 0 auto; /* 上边距30px，左右自动居中 */
    width: fit-content; /* 宽度自适应内容 */
}

/* 评分提醒界面样式 */
#rating-reminder {
    padding: 40px;
    border: 2px solid #d9534f;
    background-color: #f2dede;
    border-radius: 8px;
}
#rating-reminder h2 {
    color: #a94442;
}
#rating-reminder p {
    text-align: center; /* 提示文字居中 */
    font-size: 1.1em;
}
#rating-reminder button {
    background-color: #5cb85c; /* 绿色按钮 */
}
#rating-reminder button:hover {
    background-color: #4cae4c;
}

/* 隐藏元素的通用类 */
.hidden {
    display: none;
}