/* 定义 CSS 变量的默认值（亮模式） */
.embedded-content-container {
    /* 颜色变量 */
    --background-color: #ffffff; /* 内容块背景色 */
    --text-color: #333333;       /* 主要文本颜色 */
    --heading-color: #222222;    /* 标题颜色 */
    --link-color: #007bff;       /* 链接颜色 */
    --link-hover-color: #0056b3; /* 链接悬停颜色 */
    --box-shadow-color: rgba(0, 0, 0, 0.1); /* 阴影颜色 */

    /* 布局和基础样式 */
    font-family: sans-serif;
    width: 80%;
    max-width: 800px;
    padding: 20px;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* 主容器居中，对内联元素和文本生效 */

    /* 应用变量 */
    background-color: var(--background-color);
    color: var(--text-color);
    box-shadow: 0 0 10px var(--box-shadow-color);

    /* 平滑过渡效果，让颜色切换更自然 */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* 黑暗模式：根据用户系统偏好 */
@media (prefers-color-scheme: dark) {
    .embedded-content-container {
        --background-color: #2c2c2c; /* 深色背景 */
        --text-color: #e0e0e0;       /* 浅色文本 */
        --heading-color: #f0f0f0;    /* 浅色标题 */
        --link-color: #8ab4f8;       /* 浅色链接 */
        --link-hover-color: #6a9de8; /* 链接悬停 */
        --box-shadow-color: rgba(0, 0, 0, 0.3); /* 深色阴影 */
    }
}

/* 黑暗模式：根据父页面添加的类名 */
body.dark-mode .embedded-content-container,
.parent-container.dark-mode .embedded-content-container {
    --background-color: #2c2c2c;
    --text-color: #e0e0e0;
    --heading-color: #f0f0f0;
    --link-color: #8ab4f8;
    --link-hover-color: #6a9de8;
    --box-shadow-color: rgba(0, 0, 0, 0.3);
}


/* 调整标题和段落的样式，应用颜色变量 */
.embedded-content-container h1,
.embedded-content-container h2 {
    text-align: center !important; /* 使用 !important 强制居中 */
    margin-bottom: 1em;
    color: var(--heading-color);
}

.embedded-content-container p {
    text-align: center !important; /* 使用 !important 强制居中 */
    margin-bottom: 1em;
    color: var(--text-color);
}

/* 链接样式，应用颜色变量 */
.embedded-content-container a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.embedded-content-container a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}