/* 全局隔离：所有样式仅在 graphene-blog 容器内部生效，不干扰全站其他板块 */
.graphene-blog {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 1200px;
    margin: 0 auto;
}
.graphene-blog * {
    box-sizing: border-box;
}
/* 标题样式 */
.graphene-blog h1 {
    font-size: 2.2rem;
    color: #1a5276;
    text-transform: capitalize;
    text-align: center;
    margin: 30px 0 40px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}
.graphene-blog h2 {
    font-size: 1.8rem;
    color: #2980b9;
    margin: 40px 0 20px;
    padding-left: 10px;
    border-left: 4px solid #3498db;
}
.graphene-blog h3 {
    font-size: 1.4rem;
    color: #3498db;
    margin: 30px 0 15px;
}
/* 文本样式 */
.graphene-blog p {
    font-size: 1.1rem;
    margin: 0 0 20px;
}
.graphene-blog strong {
    color: #2c3e50;
}
.graphene-blog em {
    color: #7f8c8d;
}
/* 列表样式 */
.graphene-blog ul, .graphene-blog ol {
    margin: 0 0 20px 20px;
    padding: 0;
}
.graphene-blog li {
    margin: 10px 0;
    font-size: 1.05rem;
}
/* 表格样式 */
.graphene-blog table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.graphene-blog th, .graphene-blog td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
.graphene-blog th {
    background-color: #3498db;
    color: white;
}
.graphene-blog tr:nth-child(even) {
    background-color: #f2f2f2;
}
/* 图片样式 */
.graphene-blog .image-container {
    margin: 30px 0;
    overflow: hidden; /* 用于左右排版 */
}
.graphene-blog .image-full {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.graphene-blog .image-left {
    width: 45%;
    float: left;
    margin-right: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.graphene-blog .image-right {
    width: 45%;
    float: right;
    margin-left: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.graphene-blog .image-caption {
    text-align: center;
    font-size: 0.95rem;
    color: #666;
    margin: 10px 0 20px;
    font-style: italic;
}
.graphene-blog .image-container:after {
    content: "";
    display: table;
    clear: both;
}
.graphene-blog img:hover {
    transform: translateY(-5px); /* 鼠标悬停上浮效果 */
}
/* 目录样式 */
.graphene-blog .toc {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin: 0 0 40px;
}
.graphene-blog .toc h3 {
    margin-top: 0;
    color: #2980b9;
}
.graphene-blog .toc-list {
    list-style: none;
    padding: 0;
}
.graphene-blog .toc-list li {
    margin: 8px 0;
}
.graphene-blog .toc-list a {
    color: #3498db;
    text-decoration: none;
    font-size: 1.05rem;
}
.graphene-blog .toc-list a:hover {
    color: #1a5276;
    text-decoration: underline;
}
/* 锚点跳转平滑滚动（仅容器内生效） */
.graphene-blog {
    scroll-behavior: smooth;
}
/* 移动端适配 */
@media(max-width:768px){
    .graphene-blog .image-left,
    .graphene-blog .image-right{
        float: none;
        width: 100%;
        margin:0 0 20px 0;
    }
    .graphene-blog h1{
        font-size:1.8rem;
    }
    .graphene-blog h2{
        font-size:1.5rem;
    }
    .graphene-blog h3{
        font-size:1.2rem;
    }
}