/* 定义全局CSS变量，方便统一管理颜色和动画 */
:root {
    --primary-blue: rgba(0, 136, 255, 0.9);
    --secondary-blue: rgba(0, 102, 204, 0.9);
    --accent-blue: rgba(0, 136, 255, 0.6);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.8);
    --card-bg: rgba(255, 255, 255, 0.1);
    --card-bg-hover: rgba(0, 136, 255, 0.9);
    --border-color: rgba(255, 255, 255, 0.2);
    --shadow-light: 0 4px 15px rgba(0, 136, 255, 0.2);
    --shadow-medium: 0 8px 25px rgba(0, 136, 255, 0.3);
    --shadow-hover: 0 12px 35px rgba(0, 136, 255, 0.4);
    --transition-fast: 0.25s ease;
    --transition-normal: 0.4s ease;
    --transition-slow: 0.8s ease;
}

/* HTML: <div class="loader"></div> */
/* 添加模糊效果的 div */
.blur-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 背景模糊效果由JavaScript动态控制 */
    z-index: 1;
    backdrop-filter: blur(0px);
    transition: backdrop-filter var(--transition-slow);
}

/* 基础文章卡片样式 - 增强视觉效果 */
article {
    transition: all var(--transition-normal) cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 25px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-light);
    position: relative;
    overflow: hidden;
}

/* 卡片光泽效果 */
article::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

/* 统一所有设备上的文章卡片悬停效果 - 增强交互反馈 */
article:hover,
.project-card:hover {
    background: linear-gradient(
        135deg,
        var(--card-bg-hover) 0%,
        var(--secondary-blue) 100%
    ) !important;
    backdrop-filter: blur(12px) !important;
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--shadow-hover);
    border-color: rgba(255, 255, 255, 0.3);
}

article:hover::before {
    opacity: 1;
    animation: shine 1.5s;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%) rotate(45deg);
        opacity: 0;
    }
}

/* 统一所有设备上的文章卡片标题和文本悬停颜色 */
article:hover h2,
article:hover h3,
.project-card:hover h2,
.project-card:hover h3 {
    color: white !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
}

article:hover p,
.project-card:hover p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* 顶部导航栏样式由index.css中的.top-nav定义，这里不重复定义 */
.home {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.home:hover {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}

/* 设置标题样式 - 使用CSS变量统一管理 */
h1 {
    /* 标题基础样式由 index.css 精细控制，这里仅保留颜色 */
    color: var(--accent-blue);
    text-shadow: 0 0 8px var(--primary-blue);
}

h2 {
    color: var(--accent-blue);
    text-shadow: 0 0 8px var(--accent-blue);
    font-size: 300%;
    text-align: left;
    padding-left: 2%;
    margin-bottom: 2rem;
    position: relative;
}

h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 2%;
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-blue), transparent);
    border-radius: 2px;
}

/* 基础背景样式 - 由JavaScript动态设置背景图 */
body {
    /* background-image 将由JavaScript动态设置 */
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    /* 移除默认的 overflow 和 scroll-behavior 以让 Lenis 接管 */
    overflow-x: hidden;
}

/* 确保有足够的滚动高度来测试平滑滚动 */
main.container {
    min-height: 200vh; /* 至少两倍屏幕高度 */
}

/* 深色模式下为body和背景层添加黑色底色 */
[data-theme="dark"] body {
    background-color: #000000;
}

/* 注释掉固定背景设置，改用JavaScript随机背景功能 */

/* 设置页面底部样式 */
footer {
    position: static; /* 不再固定 */
    width: 100%;
    margin: 40px auto 10px auto;
    padding: 10px 0 20px 0;
    text-align: center;
    background: none;
    box-shadow: none;
    border: none;
}
.gn {
    color: rgba(11, 115, 225, 0.851);
    font-size: 150%;
    text-align: center;
    text-decoration: none;
}
/* 设置段落文本样式 */
p {
    font-size: 135%;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}

/* 增强按钮样式和交互效果 */
.btn {
    width: 100%;
    height: 45px;
    font-size: 20px;
    background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 12px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 136, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 136, 255, 0.4);
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
}

.btn:hover::before {
    left: 100%;
}

.btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 136, 255, 0.3);
}
/* 设置主要内容样式 - 增强的Flexbox布局 */
main {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    --main-gap: 20px; /* 统一管理主容器间距变量 */
    gap: var(--main-gap); /* 基础间距 */
    z-index: 2;
    max-width: 1400px; /* 限制最大宽度 */
    margin: 0 auto; /* 居中显示 */
    padding: 20px; /* 增加内边距 */
    perspective: 1000px; /* 添加3D透视效果基础 */
}

/* 中等屏幕下的Flexbox处理 */
@media (min-width: 1041px) and (max-width: 1199px) {
    main {
        --main-gap: 25px;
        gap: var(--main-gap); /* 中等屏幕适中间距 */
    }
}

/* 平板端样式 (701px-1040px) - 优化的响应式设计 */
@media (min-width: 701px) and (max-width: 1040px) {
    /* 平板端header样式 */
    header {
        height: auto;
        min-height: 70px;
        padding: 8px 0;
        z-index: 10;
    }

    /* 平板端主要内容样式 */
    main {
        padding: 20px 15px;
        margin: 10px auto;
        --main-gap: 25px;
        gap: var(--main-gap);
        min-height: calc(100vh - 140px);
    }

    /* 平板端文章样式 */
    article {
        flex: 1 0 320px;
        max-width: 400px;
        margin: 0;
        min-width: 320px;
        box-sizing: border-box;
        border-radius: 20px;
        padding: 22px;
        backdrop-filter: blur(7px);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        border: 2px solid rgba(255, 255, 255, 0.22);
        position: relative;
    }

    /* 平板端文章光泽效果 */
    article::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        height: 38%;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 50%,
            transparent 100%
        );
        border-radius: 16px 16px 8px 8px;
        pointer-events: none;
    }

    /* 平板端文章悬浮效果 */
    article:hover {
        background: linear-gradient(
            135deg,
            rgba(0, 136, 255, 0.8) 0%,
            rgba(0, 102, 204, 0.8) 100%
        );
        backdrop-filter: blur(9px);
        box-shadow: 0 10px 30px rgba(0, 136, 255, 0.35),
            0 3px 10px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
        transform: scale(1.015);
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    /* 平板端悬浮时增强光泽效果 */
    article:hover::after {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.06) 50%,
            transparent 100%
        );
    }

    /* 平板端悬浮时调整内部文字颜色 */
    article:hover h2 {
        color: white;
        text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    }

    article:hover p {
        color: rgba(255, 255, 255, 0.93);
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
    }

    article:hover .btn {
        background-color: rgba(255, 255, 255, 0.18);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.28);
        backdrop-filter: blur(4px);
    }

    /* 平板端h2标题样式优化 */
    h2 {
        font-size: 250%;
        text-align: center;
        padding-left: 0;
    }
    
    h2::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* 平板端页面顶部标题样式 */
    header {
        width: 100%;
        font-size: 75%;
        text-align: center;
    }

    /* 平板端页面底部样式 */
    footer {
        width: 100%;
        margin-left: 0;
    }
}

/* 宽屏幕下的Flexbox特殊处理 */
@media (min-width: 1200px) {
    main {
        justify-content: space-evenly; /* 宽屏幕下使用space-evenly分布 */
        gap: 30px; /* 宽屏幕下更大的间距 */
    }
} /* 移除固定背景设置，改用JavaScript随机背景 */

/* 设置移动端样式 - 增强的移动端体验 */
@media (max-width: 700px) {
    /* 移动端header高度优化 */
    header {
        height: auto;
        min-height: 80px;
        padding: 10px 0;
        z-index: 10;
    }
    /* 设置移动端主要内容样式 */
    main {
        padding: 15px 10px;
        margin: 5px auto;
        gap: 20px;
        min-height: calc(100vh - 140px);
    }

    /* 设置移动端文章样式 - 增强视觉和交互 */
    article {
        flex: 1 0 100%;
        max-width: 100%;
        margin: 0 auto;
        min-width: 280px;
        box-sizing: border-box;
        border-radius: 20px;
        backdrop-filter: blur(8px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        cursor: pointer;
        border: 1px solid var(--border-color);
        padding: 20px;
        position: relative;
        background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.05) 100%);
    }

    /* 移动端文章光泽效果 */
    article::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        right: 2px;
        height: 35%;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.15) 0%,
            rgba(255, 255, 255, 0.03) 50%,
            transparent 100%
        );
        border-radius: 18px 18px 6px 6px;
        pointer-events: none;
    }

    /* 移动端文章悬浮效果 - 优化交互反馈 */
    article:hover {
        background: linear-gradient(
            135deg,
            var(--card-bg-hover) 0%,
            var(--secondary-blue) 100%
        );
        backdrop-filter: blur(12px);
        box-shadow: var(--shadow-hover),
            0 2px 8px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transform: translateY(-4px) scale(1.01); /* 增加上移效果 */
        /* 移动端悬浮时增强边框效果 */
        border-color: rgba(255, 255, 255, 0.3);
    }

    /* 移动端悬浮时增强光泽效果 */
    article:hover::after {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.25) 0%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 100%
        );
    }

    /* 移动端悬浮时调整内部文字颜色 */
    article:hover h2,
    article:hover h3 {
        color: white !important;
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.5) !important;
        transition: color var(--transition-fast);
    }

    article:hover p {
        color: rgba(255, 255, 255, 0.95) !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
        transition: color var(--transition-fast);
    }

    /* 移动端悬浮时按钮样式优化 */
    article:hover .btn {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)) !important;
        color: white !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        backdrop-filter: blur(5px) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
    }

    /* 移动端 h1 由 index.css 控制，不在此重复 */

    /* 设置页面顶部标题样式 */
    header {
        width: 101%;
        font-size: 65%;
        text-align: left;
    }

    /* 设置页面底部样式 */
    footer {
        width: 101%;
        margin-left: -2%;
    }
}
/* 移除所有固定背景设置，改用JavaScript随机背景功能 */

/* 标题图标样式（仅限页面顶部 header 内的 h1 图片，不影响 Markdown 内容中的 h1 图片） */
header h1 img {
    width: 128px;
    height: 128px;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

/* 图标悬停效果 */
header h1 img:hover {
    transform: scale(1.1);
}

/* 移动端图标大小调整 */
@media (max-width: 700px) {
    header h1 img {
        width: 100px; /* 从128px减小到100px */
        height: 100px; /* 从128px减小到100px */
        margin-right: 5px; /* 从8px减小到5px，向左移动 */
        margin-left: -5px; /* 添加负的左边距，进一步向左移动 */
    }
}

/* 平板端图标大小调整 */
@media (min-width: 701px) and (max-width: 1040px) {
    header h1 img {
        width: 110px;
        height: 110px;
        margin-right: 8px;
        margin-left: -3px;
    }
}

/* Markdown编辑器样式 */
.markdown-section {
    width: 100%;
    margin: 30px 0;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.markdown-section h2 {
    text-align: center;
    color: rgba(0, 136, 255, 0.628);
    margin-bottom: 20px;
    font-size: 200%;
}

.markdown-container {
    display: flex;
    gap: 20px;
    height: 400px;
}

.markdown-input,
.markdown-output {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.markdown-input h3,
.markdown-output h3 {
    color: rgba(0, 136, 255, 0.628);
    margin-bottom: 10px;
    font-size: 120%;
    text-align: center;
}

#markdown-input {
    flex: 1;
    padding: 15px;
    border: 2px solid rgba(0, 136, 255, 0.3);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    backdrop-filter: blur(5px);
}

#markdown-input:focus {
    border-color: rgba(0, 136, 255, 0.6);
    box-shadow: 0 0 10px rgba(0, 136, 255, 0.3);
}

#markdown-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

#markdown-output {
    flex: 1;
    padding: 15px;
    border: 2px solid rgba(0, 136, 255, 0.3);
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    color: white;
    overflow-y: auto;
    backdrop-filter: blur(5px);
}

/* Markdown渲染内容样式 */
#markdown-output h1,
#markdown-output h2,
#markdown-output h3 {
    color: rgba(0, 136, 255, 0.8);
    margin: 15px 0 10px 0;
}

#markdown-output p {
    margin: 10px 0;
    line-height: 1.6;
}

#markdown-output code {
    background-color: rgba(0, 136, 255, 0.2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
}

#markdown-output pre {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 15px 0;
}

#markdown-output blockquote {
    border-left: 4px solid rgba(0, 136, 255, 0.6);
    padding-left: 15px;
    margin: 15px 0;
    background-color: rgba(0, 136, 255, 0.1);
    border-radius: 0 8px 8px 0;
}

#markdown-output a {
    color: rgba(0, 136, 255, 0.8);
    text-decoration: none;
    border-bottom: 1px dotted;
}

#markdown-output a:hover {
    color: rgba(0, 136, 255, 1);
}

#markdown-output ul,
#markdown-output ol {
    padding-left: 25px;
    margin: 10px 0;
}

#markdown-output li {
    margin: 5px 0;
}

/* 移动端样式调整 */
@media (max-width: 700px) {
    .markdown-container {
        flex-direction: column;
        height: auto;
    }

    .markdown-input,
    .markdown-output {
        height: 300px;
    }

    #markdown-input,
    #markdown-output {
        font-size: 12px;
    }

    .markdown-section {
        margin: 20px 0;
        padding: 15px;
    }
}

/* 平板端样式调整 */
@media (min-width: 701px) and (max-width: 1040px) {
    .markdown-container {
        height: 450px;
    }

    .markdown-input,
    .markdown-output {
        height: 350px;
    }

    #markdown-input,
    #markdown-output {
        font-size: 13px;
    }

    .markdown-section {
        margin: 25px 0;
        padding: 18px;
    }
}

/* Markdown显示区域样式 */
.markdown-display-section {
    width: 100%;
    margin: 30px auto; /* 左右自动，尽量对称 */
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.389);
    border-radius: 20px;
    backdrop-filter: blur(20px); /* 从16px增加到20px，进一步提高模糊度 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1); /* 玻璃效果增强 */
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    position: relative;
    /* 防止残缺的保护性样式 */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* 当与其它卡片并排（桌面宽屏多列）时，补偿第一个项目左侧 gap 造成的视觉偏移 */
@media (min-width: 1200px) {
    .markdown-display-section {
        /* 让容器内部内容相对父 flex gap 居中 */
        margin-left: calc(var(--main-gap) / 2);
        margin-right: calc(var(--main-gap) / 2);
    }
}

/* Markdown显示区域玻璃光泽效果 */
.markdown-display-section::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    height: 30%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 100%
    );
    border-radius: 18px 18px 8px 8px;
    pointer-events: none;
}

.markdown-display-section h2 {
    text-align: center;
    color: rgba(0, 136, 255, 0.8);
    margin-bottom: 25px;
    font-size: 180%;
    text-shadow: 0 0 10px rgba(0, 136, 255, 0.3);
}

.markdown-content {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-size: 15px;
    /* 防止内容溢出的保护性样式 */
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    margin-left: auto; /* 水平居中容器 */
    margin-right: auto;
    /* 可选：设置一个合理的最大宽度，避免超宽导致视觉不平衡 */
    max-width: 980px;
}

/* 覆盖全局 h1/h2 在 README (markdown-content) 中的左侧 padding，防止整体视觉右偏 */
.markdown-content h1,
.markdown-content h2 {
    padding-left: 0 !important; /* 去掉全局 10% / 2% 左内边距 */
    text-align: center; /* README 语义上要求标题居中 */
}

/* Markdown内容样式 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    color: rgba(0, 136, 255, 0.8);
    margin: 25px 0 15px 0;
    text-shadow: 0 0 8px rgba(0, 136, 255, 0.3);
}

/* README 顶级标题单独放大，避免被首页 header 调整影响 */
.markdown-content h1 {
    font-size: clamp(2.2rem, 1.4rem + 2.2vw, 3.4rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(0, 136, 255, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.35);
}

.markdown-content h2 {
    font-size: 1.6em;
    border-bottom: 2px solid rgba(0, 136, 255, 0.3);
    padding-bottom: 8px;
}

.markdown-content h3 {
    font-size: 1.3em;
    border-bottom: 1px solid rgba(0, 136, 255, 0.2);
    padding-bottom: 5px;
}

.markdown-content p {
    margin: 15px 0;
    line-height: 1.8;
}

.markdown-content strong {
    color: rgba(0, 136, 255, 0.9);
    font-weight: bold;
}

.markdown-content em {
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.markdown-content code {
    background-color: rgba(0, 136, 255, 0.15);
    color: rgba(0, 136, 255, 0.9);
    padding: 3px 6px;
    border-radius: 4px;
    font-family: "Consolas", "Monaco", "Courier New", monospace;
    font-size: 13px;
}

.markdown-content pre {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
    border-left: 4px solid rgba(0, 136, 255, 0.5);
}

.markdown-content blockquote {
    border-left: 4px solid rgba(0, 136, 255, 0.6);
    padding: 15px 20px;
    margin: 20px 0;
    background-color: rgba(0, 136, 255, 0.08);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
}

.markdown-content a {
    color: rgba(0, 136, 255, 0.8);
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 136, 255, 0.5);
    transition: all 0.3s ease;
}

.markdown-content a:hover {
    color: rgba(0, 136, 255, 1);
    border-bottom-style: solid;
}

.markdown-content ul,
.markdown-content ol {
    padding-left: 25px;
    margin: 15px 0;
}

.markdown-content li {
    margin: 8px 0;
    line-height: 1.6;
}

.markdown-content li::marker {
    color: rgba(0, 136, 255, 0.7);
}

.markdown-content hr {
    border: none;
    border-top: 2px solid rgba(0, 136, 255, 0.3);
    margin: 30px 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 136, 255, 0.3),
        transparent
    );
    height: 1px;
}

/* 表格样式 */
.markdown-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 20px 0;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    overflow: hidden;
}

.markdown-content th,
.markdown-content td {
    border: 1px solid rgba(0, 136, 255, 0.2);
    padding: 12px 15px;
    text-align: left;
}

.markdown-content th {
    background-color: rgba(0, 136, 255, 0.15);
    color: rgba(0, 136, 255, 0.9);
    font-weight: bold;
}

.markdown-content td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* 任务列表样式 */
.markdown-content input[type="checkbox"] {
    margin-right: 8px;
    accent-color: rgba(0, 136, 255, 0.8);
}

/* 更智能的响应式布局 - 使用CSS Grid实现均匀分布 */
@supports (display: grid) {
    main {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        justify-content: center;
        gap: 20px; /* 基础间距 */
        z-index: 2;
        max-width: 1400px; /* 限制最大宽度 */
        margin: 0 auto; /* 居中显示 */
        padding: 20px; /* 增加内边距 */
    } /* 中等屏幕尺寸处理 - 避免重叠和残缺 */
    @media (min-width: 1041px) and (max-width: 1199px) {
        main {
            grid-template-columns: repeat(
                auto-fit,
                minmax(320px, 1fr)
            ); /* 更灵活的列计算 */
            gap: 25px; /* 中等屏幕适中间距 */
            max-width: 100%; /* 充分利用屏幕宽度 */
            padding: 20px; /* 适中的内边距 */
        }

        /* 中等屏幕markdown区域优化 - 确保完整显示 */
        .markdown-display-section {
            grid-column: 1 / -1; /* 跨越所有列 */
            margin: 20px 0; /* 调整上下间距 */
            width: 100%; /* 确保全宽 */
            max-width: none; /* 移除最大宽度限制 */
            box-sizing: border-box;
            min-width: 0; /* 防止内容溢出 */
        }

        .markdown-content {
            padding: 20px; /* 适中的内边距 */
            font-size: 15px; /* 适中的字体大小 */
            line-height: 1.6;
            word-wrap: break-word; /* 防止长单词导致溢出 */
            overflow-wrap: break-word;
        }
    }

    /* 平板端Grid布局特殊处理 (701px-1040px) */
    @media (min-width: 701px) and (max-width: 1040px) {
        main {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 22px;
            max-width: 100%;
            padding: 15px;
            margin: 15px;
            min-height: calc(100vh - 120px);
        }

        /* 平板端markdown区域优化 */
        .markdown-display-section {
            grid-column: 1 / -1;
            margin: 18px 0;
            width: 100%;
            max-width: none;
            box-sizing: border-box;
            min-width: 0;
        }

        .markdown-content {
            padding: 18px;
            font-size: 14px;
            line-height: 1.5;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
    }

    /* 针对宽屏幕的特殊处理 - 强制3列布局 */
    @media (min-width: 1200px) {
        main {
            grid-template-columns: repeat(3, minmax(380px, 400px));
            justify-content: center;
            gap: 30px; /* 宽屏幕下更大的间距 */
        }
    }

    /* 确保grid布局下article正确设置 */
    main article {
        flex: none;
        margin: 0;
        width: 100%;
        max-width: 400px;
        min-width: 320px; /* 确保最小宽度 */
        justify-self: center;
        box-sizing: border-box; /* 确保边距计算正确 */
    }

    /* 确保Markdown区域在Grid布局中正确显示 */
    .markdown-display-section {
        grid-column: 1 / -1; /* 跨越所有列 */
        margin: 20px 0; /* 调整上下间距 */
    }
}

/* 移动端网格布局优化 */
@media (max-width: 1040px) {
    @supports (display: grid) {
        main {
            grid-template-columns: 1fr; /* 移动端强制单列 */
            gap: 20px; /* 移动端适中间距 */
            margin: 10px;
            padding: 10px; /* 四边统一padding */
            /* 移除padding-top设置，由index.css中的Grid布局控制 */
            min-height: calc(100vh - 140px); /* 确保内容区域足够高 */
        }

        main article {
            min-width: 280px;
            width: 100%;
            justify-self: stretch; /* 拉伸到全宽 */
        }

        /* 确保移动端markdown区域正确显示 */
        .markdown-display-section {
            grid-column: 1; /* 移动端单列时不需要跨列 */
            margin: 20px 0; /* 调整上下间距 */
            width: 100%; /* 确保全宽 */
            box-sizing: border-box;
            margin-left: 0; /* 移除宽屏补偿 */
            margin-right: 0;
        }
    }

    /* 移动端非Grid布局的备用方案 */
    @supports not (display: grid) {
        main {
            display: flex;
            flex-direction: column; /* 移动端强制单列 */
            align-items: stretch; /* 拉伸所有子元素 */
            padding: 10px;
            /* 移除padding-top设置，由index.css中的Grid布局控制 */
            margin: 10px;
            gap: 20px;
            min-height: calc(100vh - 140px);
        }

        article {
            width: 100%;
            flex: none; /* 不要flex伸缩 */
        }

        .markdown-display-section {
            width: 100%;
            margin: 20px 0;
            flex: none;
        }
    }
}

/* 小宽度横屏设备特殊处理（如小平板横屏）- 现在这个媒体查询不再适用，因为断点调整到1040px */
/* @media (min-width: 1041px) and (max-width: 1024px) and (orientation: landscape) {
	main {
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
		gap: 15px !important;
		padding: 15px !important;
		max-width: 100% !important;
	}
	
	.markdown-display-section {
		grid-column: 1 / -1 !important;
		margin: 10px 0 !important;
		padding: 15px !important;
		width: 100% !important;
		max-width: none !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}
	
	.markdown-content {
		padding: 15px !important;
		font-size: 14px !important;
		line-height: 1.5 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
	}
} */

/* 中等屏幕下的Flexbox备用布局 */
@media (min-width: 1041px) and (max-width: 1199px) {
    @supports not (display: grid) {
        main {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            padding: 20px;
        }

        article {
            flex: 1 0 350px; /* 与Grid布局保持一致 */
            max-width: 400px;
        }

        .markdown-display-section {
            flex: 1 0 100%; /* 强制占满一行 */
            width: 100%;
            order: 999; /* 确保在最后显示 */
        }
    }
}

/* 横屏模式下的markdown区域保护性样式 - 防止残缺 */
@media (orientation: landscape) and (min-width: 1041px) {
    .markdown-display-section {
        /* 确保在任何横屏宽度下都能正确显示 */
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden; /* 防止内容溢出 */
    }

    .markdown-content {
        /* 确保内容不会超出容器 */
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto; /* 自动断词 */
    }

    /* 确保markdown中的图片和表格不会导致溢出 */
    .markdown-content img {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
    }

    .markdown-content table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
        white-space: nowrap;
    }

    .markdown-content pre {
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }
}

/* 移动端布局样式 */
.mobile-layout {
    /* 移动端特有的样式 */
    --layout-type: mobile;
}

/* 平板端布局样式 */
.tablet-layout {
    /* 平板端特有的样式 */
    --layout-type: tablet;
}

/* 桌面端布局样式 */
.desktop-layout {
    /* 桌面端特有的样式 */
    --layout-type: desktop;
}

/* 悬浮窗样式 */
.suspension-window {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 15px 20px;
    border-radius: 8px;
    max-width: 300px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    z-index: 9999;
    pointer-events: auto;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px); /* 兼容Safari浏览器 */
}

.suspension-window.show {
    opacity: 1;
    transform: translateY(0);
}

.suspension-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.suspension-icon {
    width: 24px;
    height: 24px;
    background-color: #ff6b6b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.suspension-content {
    padding-right: 0;
}

.suspension-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: #333;
}

.suspension-close {
    width: 24px;
    height: 24px;
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 1;
}

.suspension-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .suspension-window {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none;
    }
}