/* ########### 自定义主题变量 ########### */
:root {
    --tw-primary: #2c5282;
    --tw-secondary: #333333;
    --tw-light: #fafafa;
    --tw-accent: #2c5282;
    --tw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
    --tw-shadow-sm-10: 0 1px 2px 0 rgb(0 0 0 / 10%);
    --tw-shadow-sm-20: 0 1px 3px 0 rgb(0 0 0 / 20%);
    --tw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%);
}

/* ########### 基础重置样式 ########### */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    line-height: inherit;
    background-color: var(--tw-light);
    color: var(--tw-secondary);
    font-family: 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
}

a {
    color: inherit;
    text-decoration: inherit;
}

button {
    cursor: pointer;
    background-color: transparent;
    background-image: none;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

ul,
ol,
menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ########### 新增：补全原Tailwind遗漏的核心样式 ########### */
.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.max-w-5xl {
    max-width: 64rem;
}

.max-w-7xl {
    max-width: 80rem;
}

.leading-relaxed {
    line-height: 1.6;
}

.inline-block {
    display: inline-block;
}

.border-accent {
    border-color: var(--tw-accent);
}

/* 修复边框默认样式：未指定颜色时继承父级，保证边框可见 */
.border {
    border-width: 1px;
    border-color: currentColor;
}

/* ########### 通用工具类（无特殊字符，直接使用） ########### */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.my-6 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mt-0 {
    margin-top: 0;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-3 {
    margin-top: 0.75rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.ml-2 {
    margin-left: 0.5rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.hidden {
    display: none;
}

.h-6 {
    height: 1.5rem;
}

.h-8 {
    height: 2rem;
}

.h-10 {
    height: 2.5rem;
}

.h-20 {
    height: 5rem;
}

.h-24 {
    height: 6rem;
}

.h-full {
    height: 100%;
}

.min-h-320 {
    min-height: 320px;
}

.min-h-340 {
    min-height: 340px;
}

.w-6 {
    width: 1.5rem;
}

.w-8 {
    width: 2rem;
}

.w-10 {
    width: 2.5rem;
}

.w-12 {
    width: 3rem;
}

.w-20 {
    width: 5rem;
}

.w-24 {
    width: 6rem;
}

.w-full {
    width: 100%;
}

.min-w-180 {
    min-width: 180px;
}

.min-w-200 {
    min-width: 200px;
}

.min-w-max {
    min-width: max-content;
}

.flex-1 {
    flex: 1 1 0%;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-start {
    justify-content: flex-start;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.space-y-7> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.75rem * (1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.75rem * var(--tw-space-y-reverse));
}

.overflow-x-auto {
    overflow-x: auto;
}

.rounded {
    border-radius: 0.25rem;
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.border-2 {
    border-width: 2px;
}

.border-gray-100 {
    border-color: #f3f4f6;
}

.border-gray-200 {
    border-color: #e5e7eb;
}

.bg-white {
    background-color: #fff;
}

.bg-gray-100 {
    background-color: #f3f4f6;
}

.bg-gray-200 {
    background-color: #e5e7eb;
}

.bg-primary {
    background-color: var(--tw-primary);
}

.bg-secondary {
    background-color: var(--tw-secondary);
}

.bg-light {
    background-color: var(--tw-light);
}

.bg-light-95 {
    background-color: rgba(250, 250, 250, 0.95);
}

.bg-primary-10 {
    background-color: rgba(44, 82, 130, 0.1);
}

.bg-primary-90 {
    background-color: rgba(44, 82, 130, 0.9);
}

.bg-accent-10 {
    background-color: rgba(44, 82, 130, 0.1);
}

.p-1 {
    padding: 0.25rem;
}

.p-4 {
    padding: 1rem;
}

.p-5 {
    padding: 1.25rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-7 {
    padding: 1.75rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.px-16 {
    padding-left: 4rem;
    padding-right: 4rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.pb-10 {
    padding-bottom: 2.5rem;
}

.pb-12 {
    padding-bottom: 3rem;
}

.text-center {
    text-align: center;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.font-normal {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.text-primary {
    color: var(--tw-primary);
}

.text-secondary {
    color: var(--tw-secondary);
}

.text-white {
    color: #fff;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

.text-gray-700 {
    color: #374151;
}

.text-accent {
    color: var(--tw-accent);
}

.shadow-sm {
    box-shadow: var(--tw-shadow-sm);
}

.shadow-sm-10 {
    box-shadow: var(--tw-shadow-sm-10);
}

.shadow-sm-20 {
    box-shadow: var(--tw-shadow-sm-20);
}

.shadow-md {
    box-shadow: var(--tw-shadow-md);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.3s;
}

.transition-colors {
    transition-property: color, background-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 0.3s;
}

.duration-200 {
    transition-duration: 0.2s;
}

.duration-300 {
    transition-duration: 0.3s;
}

.hover-bg-accent-10:hover {
    background-color: rgba(44, 82, 130, 0.1);
}

.hover-bg-gray-100:hover {
    background-color: #f3f4f6;
}

.hover-bg-primary-90:hover {
    background-color: rgba(44, 82, 130, 0.9);
}

.hover-text-accent:hover {
    color: var(--tw-accent);
}

.hover-shadow-sm:hover {
    box-shadow: var(--tw-shadow-sm);
}

.hover-translate-y-0-5:hover {
    transform: translateY(-0.125rem);
}

.active-scale-95:active {
    transform: scale(0.95);
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.invisible {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}

.top-0 {
    top: 0;
}

.top-full {
    top: 100%;
}

.bottom-6 {
    bottom: 1.5rem;
}

.bottom-8 {
    bottom: 2rem;
}

.left-0 {
    left: 0;
}

.right-6 {
    right: 1.5rem;
}

.right-8 {
    right: 2rem;
}

.z-50 {
    z-index: 50;
}

/* ########### 自定义专属样式 ########### */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(250, 250, 250, 0.95);
    backdrop-filter: blur(4px);
    box-shadow: var(--tw-shadow-sm);
}

header nav a,
#mobileMenu a {
    transition: all 0.3s ease-in-out;
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.card-hover {
    transition: all 0.3s ease-in-out;
}

.card-hover:hover {
    box-shadow: var(--tw-shadow-sm-20);
    transform: translateY(-0.125rem);
}

.btn-normal {
    background-color: var(--tw-primary);
    color: #fff;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease-in-out;
}

.btn-normal:hover {
    background-color: rgba(44, 82, 130, 0.9);
    box-shadow: 0 2px 4px rgba(44, 82, 130, 0.2);
}

.divider {
    width: 3rem;
    height: 0.125rem;
    background-color: var(--tw-primary);
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 9999px;
}

.tech-tag {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    background-color: rgba(44, 82, 130, 0.1);
    color: var(--tw-accent);
    font-size: 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.hobby-tag {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    background-color: #f3f4f6;
    color: #4b5563;
    font-size: 0.75rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.beian-link {
    color: #9ca3af;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

.beian-link:hover {
    color: var(--tw-accent);
}

/* ########### 交流渠道滚动容器 ########### */
#scrollContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    padding-bottom: 2.5rem;
    scroll-behavior: smooth;
}

#scrollContainer::-webkit-scrollbar {
    height: 6px;
}

#scrollContainer::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

#scrollContainer::-webkit-scrollbar-thumb:hover {
    background-color: var(--tw-primary);
}

#scrollContainer::-webkit-scrollbar-track {
    background-color: #f9fafb;
    border-radius: 3px;
}

#scrollContainer>div {
    display: flex !important;
    align-items: center;
}

#scrollContainer .card-hover {
    min-height: 320px;
}

/* ########### 回到顶部按钮 ########### */
#menuBtn {
    transition: all 0.2s ease;
}

#menuBtn:active {
    color: #666666;
    transform: scale(0.95);
}

#mobileMenu a:active {
    background-color: #f3f4f6;
    color: var(--tw-accent);
    transition: all 0.2s ease;
}

/* 核心：返回顶部按钮基础样式（移动端优先，解决「看不见」的核心问题） */
#backToTop {
    width: 2.5rem;
    /* 基础尺寸，移动端默认 */
    height: 2.5rem;
    border-radius: 9999px;
    background-color: var(--tw-primary);
    /* 纯主色背景，不透明，保证对比度 */
    color: #fff !important;
    /* 白色图标，和主色强对比，确保清晰 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    /* 加深阴影，打造强视觉边界，白色背景上瞬间醒目 */
    transition: all 0.3s ease-in-out;
    /* 所有变化顺滑过渡 */
    z-index: 999;
    /* 提高层级，避免被其他元素遮挡 */
}

#backToTop i {
    font-size: 0.875rem;
    /* 移动端图标大小 */
}

/* 显隐动画：保留原有逻辑，过渡更顺滑 */
#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:not(.show) {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
}

/* PC端（≥768px）优化：适度增大尺寸，强化交互反馈 */
@media (min-width: 768px) {
    #backToTop {
        width: 3rem;
        /* PC端适度增大，更易点击 */
        height: 3rem;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        /* PC端阴影稍深，视觉更突出 */
    }

    #backToTop i {
        font-size: 1rem;
        /* 图标同步放大，比例协调 */
    }

    /* PC端hover反馈：背景加深+阴影加重，不做缩放（避免视觉杂乱） */
    #backToTop:hover {
        background-color: #1e3a5f;
        /* 主色加深版，对比更明显 */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        /* 阴影加重，层次感更强 */
    }

    /* 点击active状态：还原阴影，提升操作手感 */
    #backToTop:active {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
}

/* 小屏适配 ≤640px（保留原有布局，仅强化对比度） */
@media (max-width: 640px) {
    #backToTop {
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        /* 保留移动端小尺寸，不占空间 */
    }

    .tech-tag {
        font-size: 0.7rem;
    }

    .hobby-tag {
        font-size: 0.7rem;
    }
}

/* ########### 响应式媒体查询（核心：断点不变，类名合法化） ########### */
/* 小屏 sm ≥640px */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
        padding-left: 0;
        padding-right: 0;
    }

    .sm-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm-flex-row {
        flex-direction: row;
    }

    .sm-inline-block {
        display: inline-block;
    }

    .sm-text-center {
        text-align: center;
    }

    .sm-gap-2 {
        gap: 0.5rem;
    }
}

/* 中屏 md ≥768px */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }

    .md-flex {
        display: flex;
    }

    .md-flex-row {
        flex-direction: row;
    }

    .md-items-center {
        align-items: center;
    }

    .md-justify-between {
        justify-content: space-between;
    }

    .md-hidden {
        display: none;
    }

    .md-gap-5 {
        gap: 1.25rem;
    }

    .md-gap-6 {
        gap: 1.5rem;
    }

    .md-mt-0 {
        margin-top: 0;
    }

    .md-mb-5 {
        margin-bottom: 1.25rem;
    }

    .md-mb-8 {
        margin-bottom: 2rem;
    }

    .md-p-6 {
        padding: 1.5rem;
    }

    .md-p-7 {
        padding: 1.75rem;
    }

    .md-pb-12 {
        padding-bottom: 3rem;
    }

    .md-px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .md-py-16 {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .md-text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }

    .md-min-h-340 {
        min-height: 340px;
    }

    .md-min-w-200 {
        min-width: 200px;
    }

    #scrollContainer {
        padding-bottom: 3rem;
    }

    #scrollContainer .card-hover {
        min-height: 340px;
    }
}

/* 大屏 lg ≥1024px */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }

    .lg-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg-px-16 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
}

/* 超大屏 xl ≥1280px */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }

    .xl-grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 小屏适配 ≤640px */
@media (max-width: 640px) {
    #backToTop {
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .tech-tag {
        font-size: 0.7rem;
    }

    .hobby-tag {
        font-size: 0.7rem;
    }
}

/* 个人信息板块 - 核心修复：640px以上（所有PC端）切2列，解决空旷问题 */
#about .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* 移动端单列 */
    align-items: flex-start;
    /* 保留顶部对齐，避免项数不均的不对称 */
}

/* 640px以上（小屏PC/平板/大屏PC）强制2列，所有PC端都不空旷 */
@media (min-width: 640px) {
    #about .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
        /* 微调列间距，比原1.5rem稍宽，2列更舒展，不拥挤 */
    }
}

/* 以下是之前的优化样式，完整保留，无需修改 */
#about .text-gray-500.text-sm {
    margin-bottom: 0.125rem;
    /* 标签与正文微小间距，层级清晰 */
}

#about .fas {
    flex-shrink: 0;
    /* 图标固定宽度，避免挤压，居中稳定 */
}

@media (max-width: 640px) {
    #about .flex.items-center.gap-3 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        /* 移动端补充左右留白，不贴边 */
    }
}

/* 标题两行截断 */
.line-clamp-2 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 卡片hover动效 */
.card-hover:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

/* 按钮样式优化 */
.btn-normal {
    padding: 6px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s;
}

/* 分类标签样式 */
.tech-tag {
    font-size: 12px;
    font-weight: 500;
}

/* 背景图适配 */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-0 {
    z-index: 0;
}

.z-10 {
    z-index: 10;
}

.opacity-20 {
    opacity: 0.2;
}

.opacity-30 {
    opacity: 0.3;
}

/* 1. 宽高比约束：确保16:9比例，图片不变形 */
.aspect-\[16\/9\] {
    aspect-ratio: 16/9;
}

/* 2. 图片不变形核心：强制保持比例，裁剪超出部分 */
.object-cover {
    object-fit: cover !important;
    object-position: center center;
    /* 裁剪时保留图片中心（视觉最优） */
}

/* 3. 层级与定位：保证蒙版在图片上、文字在蒙版上 */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-20 {
    z-index: 20;
}

/* 4. 蒙版透明度优化（可选调整）：bg-black/40 表示40%透明度的黑色 */
.bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.4);
}

/* 5. 文字适配蒙版：白色文字更清晰 */
.text-white {
    color: #ffffff;
}

.text-gray-100 {
    color: #f3f4f6;
}

.border-white\/30 {
    border-color: rgba(255, 255, 255, 0.3);
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ========== 修复内容区可见性核心样式 ========== */
/* 1. 替换未定义的 bg-light，定义浅灰色背景 */
.bg-gray-50 {
    background-color: #f9fafb;
}

/* 2. 定义 max-w-3xl（内容容器最大宽度），确保容器有宽度 */
.max-w-3xl {
    max-width: 48rem;
    /* 3xl 对应 768px 左右，适配大部分屏幕 */
    margin-left: auto;
    margin-right: auto;
    /* 居中 */
}

/* 3. 文章内容区基础样式：保证文字可见、排版舒适 */
.post-content {
    color: #111827;
    /* 深灰色文字，和白色背景对比明显 */
    font-size: 16px;
    line-height: 1.8;
    /* 行高增大，阅读更舒适 */
    overflow: visible !important;
    /* 确保内容不被隐藏 */
}

/* 4. Markdown解析后的内容样式补全（避免标签无样式） */
.post-content p {
    margin-bottom: 1.2rem;
}

.post-content h1,
.post-content h2,
.post-content h3 {
    color: #111827;
    margin: 1.5rem 0 0.8rem;
}

.post-content img {
    max-width: 100%;
    /* 图片自适应容器，不溢出 */
    height: auto;
    margin: 1rem 0;
}

.post-content code {
    background-color: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.post-content pre {
    background-color: #1f2937;
    color: #f9fafb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

/* ========== 原有样式保留（不变形+蒙版） ========== */
.aspect-\[16\/9\] {
    aspect-ratio: 16/9;
}

.overflow-hidden {
    overflow: hidden;
}

.object-cover {
    object-fit: cover !important;
    object-position: center center;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-20 {
    z-index: 20;
}

.bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.4);
}

.text-white {
    color: #ffffff;
}

.text-gray-100 {
    color: #f3f4f6;
}

.border-white\/30 {
    border-color: rgba(255, 255, 255, 0.3);
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ========== 按钮样式（确保按钮可见） ========== */
.btn-normal {
    padding: 8px 16px;
    background-color: #3b82f6;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-normal:hover {
    background-color: #2563eb;
}

pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 1em
}

code.hljs {
    padding: 3px 5px
}

/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
.hljs {
    color: #c9d1d9;
    background: #0d1117
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
    color: #ff7b72
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
    color: #d2a8ff
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
    color: #79c0ff
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
    color: #a5d6ff
}

.hljs-built_in,
.hljs-symbol {
    color: #ffa657
}

.hljs-code,
.hljs-comment,
.hljs-formula {
    color: #8b949e
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
    color: #7ee787
}

.hljs-subst {
    color: #c9d1d9
}

.hljs-section {
    color: #1f6feb;
    font-weight: 700
}

.hljs-bullet {
    color: #f2cc60
}

.hljs-emphasis {
    color: #c9d1d9;
    font-style: italic
}

.hljs-strong {
    color: #c9d1d9;
    font-weight: 700
}

.hljs-addition {
    color: #aff5b4;
    background-color: #033a16
}

.hljs-deletion {
    color: #ffdcd7;
    background-color: #67060c
}