@import "./styles.css";


:root{
    --h-title-color:#000000;
}

.header {
    border-bottom: solid 2px var(--bs-blue);
}

/* 进度条样式 */
.progress-container {
    width: 100%;
    height: 4px;
    background: #f1f1f1;
    position: fixed;
    top: 74px; /* 导航栏高度，根据实际情况调整 */
    left: 0;
    z-index: 1000;
}

.progress-bar {
    height: 4px;
    background: var(--bs-blue);
    width: 0%;
    transition: width 0.2s ease;
}

.navbar-brand {
    font-size: 1.4rem;
    font-weight: 600;
}

/* 优化导航栏在移动端的显示 */
@media (max-width: 991px) {
    .navbar-brand {
        font-size: 1.2rem;
        max-width: 70%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .navbar-toggler {
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .navbar-toggler i {
        font-size: 1.2rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1rem;
        max-width: 60%;
    }
    
    .container.px-5 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .navbar-toggler {
        padding: 0.4rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 380px) {
    .navbar-brand {
        font-size: 0.9rem;
        max-width: 50%;
    }
    
    .navbar-toggler {
        font-size: 0.75rem;
    }
}

.bg-bottom {
    background-color: var(--h-title-color);
}

.top-section {
    position: relative;
    padding: 10rem 0;
    background-position: center center !important; /* 改回居中显示 */
    background-size: cover !important;
    height: 45rem !important; /* 增加高度确保全屏显示完整 */
    overflow: visible !important; /* 修改为visible确保内容不被截断 */
    background-attachment: scroll !important; /* 与wisconsin-bg保持一致 */
}

.top-section h1 {
    font-weight: 700;
    margin-top: 2rem;
    font-size: 4rem;
    text-align: center;
}

.top-section p {
    font-size: 1.2rem;
    text-align: center;
}

.top-section .top-section-content {
    position: relative;
    z-index: 1;
}

/* 普通顶部部分的遮罩，但不会应用到wisconsin-bg */
.top-section:not(.wisconsin-bg):before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* Wisconsin背景专用样式 */
.wisconsin-bg {
    filter: brightness(1.1) contrast(1.05);
    background-size: 120% auto !important; /* 将cover改为120% auto，使图片更宽 */
    background-position: center center !important; /* 保持居中显示 */
    background-repeat: no-repeat !important; /* 防止图片重复 */
    background-attachment: scroll !important; /* 改为scroll，允许背景随内容滚动 */
    width: 100% !important; /* 确保宽度为100% */
    height: 100% !important; /* 确保高度为100% */
}

/* 为wisconsin-bg添加暗色遮罩，确保文字清晰可读 */
.wisconsin-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.55));
    z-index: 0;
}

.wisconsin-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    mix-blend-mode: overlay;
    z-index: 0;
}

section header h2{
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: var(--h-title-color);
    font-size: 2.3rem;
    line-height: 4rem;
}

.name-title {
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    color: #333;
    font-size: 4rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    text-align: center;
    width: 100%;
    position: relative;
    margin-top: -1rem;
}

.about-name-section {
    width: 85%;
    margin-left: 0;
    margin-right: auto;
    padding-right: 10%;
    position: relative;
}

.name-info {
    font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #555;
    font-size: 1.3rem;
    margin-bottom: 2.5rem;
    text-align: center;
    width: 100%;
    padding-left: 0;
}

.about-social-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    padding-left: 0;
    width: 100%;
}

.about-social-icons .btn {
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性动画 */
    margin: 0;
    position: relative;
    overflow: hidden;
}

.about-social-icons .btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    z-index: 0;
}

.about-social-icons .btn:hover::before {
    width: 120%;
    height: 400%;
}

.about-social-icons .btn i {
    margin-right: 0.3rem;
    font-size: 1rem;
    position: relative;
    z-index: 1;
}

.about-social-icons .btn span {
    position: relative;
    z-index: 1;
}

.about-social-icons .btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.about-social-icons .btn:active {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.about-social-icons .btn-cv {
    background-color: #4e54c8;
    border-color: #4e54c8;
    color: white;
}

.about-social-icons .btn-github {
    background-color: #24292e;
    border-color: #24292e;
    color: white;
}

.about-social-icons .btn-linkedin {
    background-color: #0077b5;
    border-color: #0077b5;
    color: white;
}

.about-social-icons .btn-scholar {
    background-color: #4285f4;
    border-color: #4285f4;
    color: white;
}

.about-social-icons .btn-x {
    background-color: #000000;
    border-color: #000000;
    color: white;
}

.about-social-icons .btn-rednote {
    background-color: #ff2442;
    border-color: #ff2442;
    color: white;
}

.section-divider {
    height: 1px;
    background-color: #ddd;
    margin: 1.5rem 0;
}

section .main-body{
    font-size: 1.3rem;
    font-weight: 200;
    line-height: 2.4rem;
}


.bg-gradient-primary-to-secondary-light {
    background: linear-gradient(45deg, #fcfcfc, #ffffff) !important;
}

.bg-gradient-primary-to-secondary-gray {
    background: linear-gradient(45deg, #f0f0f0, #f1f1f1) !important;
}



.on-top {
    position: relative;
    z-index: 10000;
}

.top-bg {
    background-position: center;
    background-size: fill;
    width: 100%;
    height: 100%;
}

.top-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.photo {
    position: absolute;
    right: 5%;
    top: 36rem;
    z-index: 1000 !important; /* 提高z-index值 */
    transition: all 0.3s ease;
    display: block !important; /* 确保照片显示 */
    opacity: 1 !important; /* 确保照片可见 */
    visibility: visible !important; /* 确保照片可见 */
    pointer-events: auto; /* 恢复指针事件，允许交互 */
    transform: translateZ(0); /* 强制硬件加速，解决可能的渲染问题 */
}

.photo img {
    height: 16rem;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block !important; /* 确保图片显示 */
    opacity: 1 !important; /* 确保图片可见 */
    visibility: visible !important; /* 确保图片可见 */
    max-width: none !important; /* 移除最大宽度限制 */
}

.photo img:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}

.photo .screen {
    position: absolute;
    background-size: cover;
    pointer-events: auto;
}

.photo .button {
    position: absolute;
    cursor: pointer;
}

@media screen and (max-width: 991px) {
    .photo {
        position: absolute; /* 保持绝对定位 */
        right: 5%; /* 与桌面端保持一致 */
        top: 26rem; /* 与桌面端保持一致 */
        text-align: center;
        margin: 0;
        transform: scale(0.9) translateZ(0); /* 稍微缩小以适应小屏幕 */
        z-index: 1000 !important; /* 保持高z-index */
    }

    .photo img {
        height: 14rem;
        max-width: none; /* 移除最大宽度限制 */
    }

    .top-section {
        height: 45rem !important; /* 保持足够高度 */
        overflow: visible !important; /* 确保内容不被截断 */
    }
    
    /* 确保About部分在移动端的显示 */
    .about-name-section {
        width: 100%;
        padding-right: 0;
        margin: 0 auto;
        text-align: center;
    }
    
    /* 社交图标在移动端保持一致布局 */
    .about-social-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 1rem auto;
    }
    
    .about-social-icons .btn {
        margin: 0.3rem;
    }
}

@media screen and (max-width: 736px) {
    .photo {
        position: absolute; /* 保持绝对定位 */
        right: 5%; /* 与桌面端保持一致 */
        top: 26rem; /* 与桌面端保持一致 */
        transform: scale(0.8); /* 更小屏幕进一步缩小 */
    }

    .photo img {
        height: 14rem;
        margin: 0;
    }

    .top-section {
        height: 45rem !important; /* 增加高度以适应内容 */
        overflow: visible;
    }
    
    .social-icons .btn {
        margin-bottom: 0.5rem;
    }
    
    /* 调整标语位置，使其在移动端更合理 */
    .tagline-container {
        top: 100px;
        width: 90%;
        left: 5%;
        right: 5%;
    }
    
    /* 确保打字效果文本在移动端不会溢出 */
    .tagline-main, .tagline-sub {
        max-width: 100%; /* 使用100%而不是95vw */
    }
    
    /* 确保section内容在移动端有合适的内边距 */
    .container.px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* 导航栏在移动端的优化 */
    .navbar-brand {
        font-size: 1.1rem;
    }
}

/* 添加小屏幕手机的额外优化 */
@media screen and (max-width: 480px) {
    .photo {
        position: absolute;
        right: 5%;
        top: 24rem; /* 略微上移 */
        transform: scale(0.7) translateZ(0); /* 更小屏幕更小比例 */
        z-index: 1000 !important; /* 保持高z-index */
    }
    
    .tagline-main {
        font-size: 2rem !important;
    }
    
    .tagline-sub {
        font-size: 2rem !important;
    }
    
    .name-title {
        font-size: 3rem;
    }
    
    .name-info {
        font-size: 1rem;
    }
    
    /* 调整所有内容部分的字体大小 */
    section .main-body {
        font-size: 1.1rem;
        line-height: 1.8rem;
    }
    
    /* 确保publications项目在移动设备上正确显示 */
    .publication-item {
        padding: 0.8rem;
    }
    
    .publication-title h3 {
        font-size: 1.1rem;
    }
    
    /* 修复社交按钮在特小屏幕上的显示 */
    .about-social-icons .btn {
        padding: 0.3rem 0.6rem;
        font-size: 0.85rem;
    }
    
    .top-section {
        height: 45rem !important; /* 确保高度一致 */
        overflow: visible !important;
    }
}

/* 添加最小屏幕尺寸优化 */
@media screen and (max-width: 375px) {
    .photo {
        position: absolute;
        right: 5%;
        top: 22rem;
        transform: scale(0.6) translateZ(0);
        z-index: 1000 !important;
    }
    
    .tagline-container {
        top: 80px;
    }
    
    .tagline-main, .tagline-sub {
        font-size: 1.7rem !important;
    }
    
    .top-section {
        height: 45rem !important; /* 保持一致的高度 */
        overflow: visible !important;
    }
    
    .about-social-icons {
        padding: 0;
    }
    
    .about-social-icons .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        margin: 0.2rem;
    }
}

/* 确保所有屏幕尺寸下的按钮一致性 */
@media (max-width: 576px) {
    .about-social-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0.5rem auto;
        padding: 0;
    }
    
    .about-social-icons .btn {
        margin: 0.25rem;
        font-size: 0.9rem;
        padding: 0.3rem 0.6rem;
    }
    
    .section-header {
        font-size: 1.8rem;
        padding-right: 25px;
    }
}

/* 修复移动端导航 */
@media (max-width: 991px) {
    .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
        border-radius: 0.5rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        padding: 1rem;
        margin-top: 0.5rem;
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    .progress-container {
        top: 64px; /* 调整移动端导航栏高度 */
    }
}

/* 确保图片在屏幕旋转时也能正确显示 */
@media screen and (max-height: 600px) and (orientation: landscape) {
    .photo {
        position: absolute;
        right: 5%;
        top: 18rem;
        transform: scale(0.6) translateZ(0);
        z-index: 1000 !important;
    }
    
    .top-section {
        height: 45rem !important; /* 保持一致的高度 */
        overflow: visible !important;
    }
}

.social-icons .btn {
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.social-icons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.social-icons .btn i {
    margin-right: 0.3rem;
}

.about-social-icons .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* 折叠功能样式 */
.section-header {
    cursor: pointer;
    position: relative;
    padding-right: 30px;
    transition: all 0.3s ease;
}

.section-header:hover {
    opacity: 0.8;
}

.section-header::after {
    content: "\f282";
    font-family: "bootstrap-icons";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.section-header.collapsed::after {
    transform: translateY(-50%) rotate(180deg);
}

.section-content {
    transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
    max-height: 2000px;
    opacity: 1;
    transform: translateY(0);
    overflow: hidden;
}

.section-content.collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    margin: 0;
    padding: 0;
}

/* Publication styles */
.publication-item {
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid #eaeaea;
}

.publication-item:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transform: translateY(-5px);
    border-color: #4e54c8;
}

.publication-title {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.publication-title h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
    font-weight: 600;
}

.publication-meta {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.publication-meta strong {
    font-weight: 700;
    color: #444;
}

.publication-venue {
    font-style: italic;
    color: #555;
}

.first-author {
    position: relative;
    font-weight: normal;
    color: inherit;
}

.corresponding-author {
    position: relative;
    font-weight: normal;
    color: inherit;
}

.author-marker {
    position: relative;
    top: -0.3em;
    font-size: 1.2em;
    color: #4e54c8;
    font-weight: bold;
    margin-left: 0.05em;
    margin-right: 0.05em;
}

.publication-footnote {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.7rem;
    font-style: italic;
}

.abstract-btn {
    display: inline-block;
    background-color: #4e54c8;
    color: white;
    border: none;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.abstract-btn:hover {
    background-color: #3a3f9e;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.abstract-btn i {
    margin-right: 0.3rem;
    font-size: 0.9rem;
}

.publication-abstract {
    margin-top: 0.8rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1.7;
    border-left: 3px solid #4e54c8;
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease, margin-top 0.35s ease, border-left-width 0.35s ease;
}

.publication-abstract.is-hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    border-left-width: 0;
}
.abstract-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 1.15rem;
}

.publication-links {
    margin-top: 0.5rem;
}

.publication-links a {
    display: inline-block;
    margin-right: 0.8rem;
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
    background-color: #4e54c8;
    padding: 0.35rem 1.2rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: 100px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.publication-links a:hover {
    background-color: #3a3f9e;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

.publication-links a:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Publications container */
.publications-container {
    position: relative;
    margin: 0 -5px; /* 抵消container的padding */
    padding: 0 5px;
    max-height: 70vh; /* 限制整个容器高度 */
    overflow: visible; /* 允许超出部分可见 */
}

/* Publication container scrollbar */
#publications-md {
    max-height: 70vh !important; /* 使用!important强制应用 */
    height: 70vh !important; /* 固定高度 */
    overflow-y: auto !important; /* 强制显示滚动条 */
    padding-right: 15px !important; /* 为滚动条留出空间 */
    padding-bottom: 20px !important; /* 底部留出空间 */
    display: block !important; /* 确保元素正确显示 */
    position: relative !important; /* 确保定位正确 */
    z-index: 10 !important; /* 确保内容在前面 */
}

/* 美化滚动条样式 */
#publications-md::-webkit-scrollbar {
    width: 8px !important;
    display: block !important; /* 确保滚动条显示 */
}

#publications-md::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 10px !important;
}

#publications-md::-webkit-scrollbar-thumb {
    background: #4e54c8 !important;
    border-radius: 10px !important;
}

#publications-md::-webkit-scrollbar-thumb:hover {
    background: #3a3f9e !important;
}

/* Firefox滚动条样式 */
#publications-md {
    scrollbar-width: thin !important;
    scrollbar-color: #4e54c8 #f1f1f1 !important;
}

/* 确保在移动设备上也能正常滚动 */
@media (max-width: 768px) {
    #publications-md {
        max-height: none !important; /* 移动端不限制高度 */
        height: auto !important; /* 移动端高度自适应 */
        overflow-y: visible !important; /* 移动端不使用滚动条 */
        padding-right: 0 !important; /* 移除滚动条空间 */
    }
}

/* 添加滚动阴影提示 */
.publications-container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to top, rgba(240, 240, 240, 0.8), transparent);
    pointer-events: none; /* 确保不会干扰鼠标事件 */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.publications-container.has-overflow::after {
    opacity: 1;
}

/* 增强Awards部分加粗文本的效果 */
#awards-md strong {
    font-weight: 900;
    color: #000000;
    letter-spacing: 0.01em;
}

/* About section text and links styling */
#about-md {
    font-weight: 500; /* 增加About部分文本的字体粗细 */
    color: #000000; /* 确保普通文字为纯黑色 */
}

#about-md a {
    color: #0400ff; /* 更深的蓝色 */
    text-decoration: none; /* 默认无下划线 */
    transition: all 0.3s ease; /* 平滑过渡效果 */
    font-weight: 500; 
    border-bottom: 1px solid transparent; /* 透明下边框，悬浮时显示 */
    padding-bottom: 1px; /* 为下边框留出空间 */
    position: relative; /* 用于添加动画效果 */
}

#about-md a:hover {
    color: #1e45b3; /* 悬停时更深的蓝色 */
    border-bottom: 1px solid #1e45b3; /* 显示下边框 */
    transform: translateY(-1px); /* 轻微上移效果 */
    text-shadow: 0 0 1px rgba(30, 69, 179, 0.2); /* 轻微发光效果 */
}

#about-md a:visited {
    color: #4f5cad; /* 访问后的颜色 */
    text-decoration: none;
}

#about-md a:visited:hover {
    color: #3a4588; /* 访问后悬停的颜色 */
    border-bottom: 1px solid #3a4588;
    transform: translateY(-1px);
}

/* 让strong标签的文字也更粗 */
#about-md strong {
    font-weight: 700;
    color: #000000; /* 确保加粗文字也是黑色 */
}

/* 确保段落文字为黑色 */
#about-md p, #about-md li, #about-md h4 {
    color: #000000;
}

/* 标语样式 */
.tagline-container {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 170px; /* 修改这个值可以上下移动标语 */
    z-index: 10;
}

.tagline {
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                 0 0 10px rgba(78, 84, 200, 0.8),
                 0 0 20px rgba(78, 84, 200, 0.5);
    letter-spacing: 0.05em;
    padding: 0.5rem 1rem;
    transform: rotate(-2deg);
    animation: glow 2s ease-in-out infinite alternate, float 6s ease-in-out infinite;
    display: inline-block;
}

@keyframes glow {
    from {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                     0 0 10px rgba(78, 84, 200, 0.8),
                     0 0 20px rgba(78, 84, 200, 0.5);
    }
    to {
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                     0 0 15px rgba(78, 84, 200, 0.9),
                     0 0 30px rgba(78, 84, 200, 0.7),
                     0 0 40px rgba(78, 84, 200, 0.5);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(-2deg);
    }
    50% {
        transform: translateY(-15px) rotate(-1deg);
    }
    100% {
        transform: translateY(0px) rotate(-2deg);
    }
}

/* 移动设备上的标语样式调整 */
@media screen and (max-width: 768px) {
    .tagline {
        font-size: 2rem;
        padding: 0.3rem 0.5rem;
    }
    
    .tagline-container {
        top: 130px; /* 移动设备上的位置 */
    }
}

/* 大屏幕设备上的标语样式调整 */
@media screen and (min-width: 1200px) {
    .tagline-container {
        top: 200px; /* 大屏幕上的位置 */
    }
    
    .tagline {
        font-size: 6.4rem; /* 大屏幕上的字体大小 */
    }
}

/* 打字效果标语样式 */
.typewriter-container {
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.typewriter-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.tagline-main {
    color: #ffffff;
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                 0 0 10px rgba(78, 84, 200, 0.8),
                 0 0 20px rgba(78, 84, 200, 0.5);
    letter-spacing: -0.02em; /* 负值使字母更紧凑 */
    white-space: nowrap;
    overflow: hidden;
    border-right: 4px solid transparent;
    width: 0;
    animation: typing-main 3.5s steps(20, end) forwards,
               blink-caret 0.75s step-end 5;
    animation-delay: 0.5s;
}

.tagline-sub {
    color: #ffffff;
    font-size: 3.8rem !important; /* 与tagline-main相同的字体大小 */
    font-weight: 700; /* 与tagline-main相同的粗细 */
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8), 
                 0 0 10px rgba(78, 84, 200, 0.8),
                 0 0 20px rgba(78, 84, 200, 0.5);
    letter-spacing: -0.02em; /* 与tagline-main相同的字母间距 */
    white-space: nowrap;
    overflow: hidden; /* 恢复为hidden以实现打字效果 */
    width: 0; /* 恢复为0以实现打字效果 */
    opacity: 0; /* 恢复为0以实现打字效果 */
    border-right: 4px solid #fff; /* 恢复光标效果 */
    animation: 
        typing-sub 2.5s steps(16, end) forwards,
        blink-caret-sub 0.75s step-end 1, /* 减少闪烁次数到1次 */
        fade-in 0.1s ease forwards;
    animation-delay: 4.5s;
}

@keyframes typing-main {
    from { width: 0 }
    to { width: 100% }
}

@keyframes typing-sub {
    from { 
        width: 0;
    }
    to { 
        width: 100%;
        border-right-color: transparent; /* 确保打字完成后光标消失 */
        border-right-width: 0; /* 完全移除光标边框 */
        font-size: 3.8rem; /* 确保动画结束后字体大小与tagline-main一致 */
    }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #fff }
}

@keyframes blink-caret-sub {
    from, to { border-color: transparent }
    50% { border-color: #fff }
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1 }
}

/* 移动设备上的标语样式调整 */
@media screen and (max-width: 768px) {
    .tagline-main {
        font-size: 2.6rem;
    }
    
    .tagline-sub {
        font-size: 2.6rem !important; /* 与tagline-main相同的字体大小 */
    }
}

/* 大屏幕设备上的标语样式调整 */
@media screen and (min-width: 1200px) {
    .tagline-main {
        font-size: 4.5rem;
    }
    
    .tagline-sub {
        font-size: 4.5rem !important; /* 与tagline-main相同的字体大小 */
    }
    
    .typewriter-container {
        margin-top: 30px;
    }
}

/* 修复网页在不同设备上的整体布局 */
html, body {
    overflow-x: hidden; /* 防止水平滚动 */
    width: 100%;
    max-width: 100%;
}

/* 确保container在所有设备上都有适当的边距 */
@media (max-width: 576px) {
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 添加全局链接样式 */
a {
    transition: all 0.3s ease;
}

/* 为主内容区域的所有蓝色链接添加悬浮效果 */
.main-body a {
    color: #0400ff;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.main-body a:hover {
    color: #1e45b3;
    border-bottom: 1px solid #1e45b3;
    transform: translateY(-1px);
    text-shadow: 0 0 1px rgba(30, 69, 179, 0.2);
}

.main-body a:active {
    transform: translateY(0); /* 点击时回到原位 */
}

/* 为Publications部分的链接添加一致的悬浮效果 */
.publication-links a {
    display: inline-block;
    margin-right: 0.8rem;
    color: #fff;
    font-size: 0.9rem;
    text-decoration: none;
    background-color: #4e54c8;
    padding: 0.35rem 1.2rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: 100px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.publication-links a:hover {
    background-color: #3a3f9e;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-decoration: none;
}

.publication-links a:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* 增强导航栏链接的悬浮效果 */
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #4e54c8;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover::after {
    width: 70%;
}

.nav-link:hover {
    color: #4e54c8 !important;
    transform: translateY(-2px);
}

.nav-link.active {
    color: rgba(0, 0, 0, 0.7) !important;
    font-weight: 500;
}

/* 修改媒体查询和打字动画样式，使其在移动端更好展示 */
@media screen and (max-width: 768px) {
    /* 移动端打字动画调整 */
    @keyframes typing-main {
        from { width: 0 }
        to { width: 100% }
    }
    
    @keyframes typing-sub {
        from { width: 0 }
        to { 
            width: 100%;
            border-right-color: transparent;
            border-right-width: 0;
            font-size: 2.6rem !important; /* 移动端大小 */
        }
    }
    
    /* 确保typewriter容器在移动端正确对齐 */
    .typewriter-container {
        width: 95%;
        margin: 0 auto;
    }
    
    .typewriter-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
    }
}

/* 优化Publications部分在移动端的显示 */
@media (max-width: 768px) {
    .publication-item {
        padding: 1rem;
    }
    
    .publication-title {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .publication-title h3 {
        margin-bottom: 0.5rem;
    }
    
    .publication-meta {
        font-size: 0.9rem;
    }
    
    .publication-abstract {
        padding: 0.8rem;
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .publication-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .publication-links a {
        margin-right: 0;
        margin-bottom: 0.5rem;
        padding: 0.3rem 0.8rem;
        min-width: 0;
        font-size: 0.8rem;
    }
    
    /* 优化内容部分的滚动区域 */
    #publications-md {
        max-height: none !important; /* 移动端不限制高度 */
        height: auto !important; /* 移动端高度自适应 */
        overflow-y: visible !important; /* 移动端不使用滚动条 */
    }
}

/* 增强触摸设备的交互体验 */
@media (hover: none) and (pointer: coarse) {
    /* 对触摸设备优化按钮大小 */
    .navbar-toggler {
        padding: 0.5rem;
    }
    
    /* 增大导航链接的点击区域 */
    .nav-link {
        padding: 0.7rem 1rem;
    }
    
    /* 优化社交按钮的触摸体验 */
    .about-social-icons .btn {
        padding: 0.5rem 0.8rem;
        margin: 0.3rem;
    }
    
    /* 禁用悬停效果，用触摸效果代替 */
    .about-social-icons .btn:hover, 
    .photo img:hover,
    .section-header:hover,
    .social-icons .btn:hover,
    .publication-item:hover,
    .publication-links a:hover {
        transform: none;
        box-shadow: none;
    }
    
    /* 添加触摸效果 */
    .about-social-icons .btn:active, 
    .photo img:active,
    .publication-links a:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }
}

/* 解决iOS Safari上的特定问题 */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari特定修复 */
    .top-section {
        background-attachment: scroll !important;
        height: 45rem !important;
        overflow: visible !important;
    }
    
    /* 修复iOS Safari上的固定元素问题 */
    .progress-container {
        -webkit-transform: translateZ(0);
        position: fixed;
    }
    
    /* 修复iOS Safari上的绝对定位元素 */
    .photo {
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
        z-index: 1000 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    @media screen and (max-width: 991px) {
        .photo {
            -webkit-transform: translateZ(0) scale(0.9);
            transform: translateZ(0) scale(0.9);
        }
    }
    
    @media screen and (max-width: 736px) {
        .photo {
            -webkit-transform: translateZ(0) scale(0.8);
            transform: translateZ(0) scale(0.8);
        }
    }
    
    @media screen and (max-width: 480px) {
        .photo {
            -webkit-transform: translateZ(0) scale(0.7);
            transform: translateZ(0) scale(0.7);
        }
    }
    
    @media screen and (max-width: 375px) {
        .photo {
            -webkit-transform: translateZ(0) scale(0.6);
            transform: translateZ(0) scale(0.6);
        }
    }
}

.social-icons .btn {
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Project Cards Styles */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.8rem;
    margin-top: 1.5rem;
}

.project-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid #eaeaea;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.project-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.project-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
    z-index: 0;
}

.project-content > * {
    position: relative;
    z-index: 1;
}

.project-header {
    margin-bottom: 1rem;
}

.project-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.8rem 0;
    line-height: 1.3;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.project-tag {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.project-description {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
    flex-grow: 1;
}

.project-links {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: rgba(255, 255, 255, 0.95);
    color: #667eea;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.project-link:hover {
    background-color: #ffffff;
    color: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

.project-link i {
    font-size: 1.1rem;
}

.project-status {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.5rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    
    .project-card {
        padding: 1.5rem;
    }
    
    .project-title {
        font-size: 1.3rem;
    }
    
    .project-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .project-card {
        padding: 1.2rem;
    }
    
    .project-title {
        font-size: 1.2rem;
    }
    
    .project-tag {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
    }
    
    .project-link {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
}

/* Image Gallery / Lightbox Styles */
.gallery-link {
    color: #4e54c8;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 0 2px;
}

.gallery-link:hover {
    color: #3a3f9e;
    border-bottom: 2px solid #4e54c8;
    transform: translateY(-1px);
}

.gallery-link::after {
    content: "📸";
    font-size: 0.8em;
    margin-left: 4px;
    opacity: 0.7;
}

/* Gallery link without camera icon */
.gallery-link-no-icon {
    color: #4e54c8;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    padding: 0 2px;
}

.gallery-link-no-icon:hover {
    color: #3a3f9e;
    border-bottom: 2px solid #4e54c8;
    transform: translateY(-1px);
}

/* No ::after pseudo-element for no-icon version */

/* Motto Section Styles */
.motto-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.motto-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
        url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.6;
}

.motto-section .container {
    position: relative;
    z-index: 1;
}

.motto-title {
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1rem;
    letter-spacing: 0.1em;
}

.motto-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    margin: 0 auto 3rem;
}

.motto-carousel {
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.motto-slide {
    position: absolute;
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.motto-slide.active {
    opacity: 1;
    position: relative;
}

.motto-text {
    font-family: "Kanit", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 1.6;
    margin: 0;
    padding: 0 2rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.motto-text em {
    font-style: italic;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.6), 0 0 25px rgba(255, 215, 0, 0.3);
}

.motto-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 2.5rem;
}

.motto-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.motto-dot:hover {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.2);
}

.motto-dot.active {
    background: #ffffff;
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .motto-section {
        padding: 3rem 0;
    }
    
    .motto-title {
        font-size: 2rem;
    }
    
    .motto-text {
        font-size: 1.3rem;
        padding: 0 1rem;
    }
    
    .motto-carousel {
        min-height: 120px;
    }
}

@media (max-width: 480px) {
    .motto-title {
        font-size: 1.6rem;
    }
    
    .motto-text {
        font-size: 1.1rem;
    }
    
    .motto-carousel {
        min-height: 100px;
    }
}

/* Lightbox Modal */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.3s ease;
}

.lightbox-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    margin: auto;
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-content img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: #ffffff;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.lightbox-caption {
    text-align: center;
    color: #ffffff;
    padding: 15px;
    font-size: 1.1rem;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

/* Navigation arrows */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    user-select: none;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .lightbox-content {
        max-width: 95%;
    }
    
    .lightbox-close {
        top: 10px;
        right: 10px;
        font-size: 30px;
        width: 35px;
        height: 35px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        font-size: 30px;
        width: 40px;
        height: 40px;
    }
    
    .lightbox-prev {
        left: 10px;
    }
    
    .lightbox-next {
        right: 10px;
    }
    
    .lightbox-caption {
        font-size: 0.9rem;
        padding: 10px;
    }
}

/* ==================== Stats Section ==================== */
.stats-section {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

/* Animated stars background */
.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 250px 100px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 350px 150px, rgba(255,255,255,0.5), transparent),
        radial-gradient(2px 2px at 400px 60px, rgba(255,255,255,0.7), transparent);
    background-size: 450px 200px;
    animation: twinkle 8s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.6;
}

.stats-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 0%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(118, 75, 162, 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

.stats-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 30px rgba(102, 126, 234, 0.5);
    animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% { text-shadow: 0 0 30px rgba(102, 126, 234, 0.5); }
    50% { text-shadow: 0 0 50px rgba(102, 126, 234, 0.8), 0 0 80px rgba(118, 75, 162, 0.4); }
}

.stats-divider {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #667eea, #764ba2, transparent);
    margin: 0 auto 3rem;
    border-radius: 2px;
    position: relative;
    z-index: 1;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    position: relative;
    z-index: 1;
    align-items: stretch;
}

.stats-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.stats-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.6s ease;
}

.stats-card:hover::before {
    left: 100%;
}

.stats-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(102, 126, 234, 0.2),
        inset 0 0 60px rgba(102, 126, 234, 0.05);
    border-color: rgba(102, 126, 234, 0.3);
}

.stats-card-title {
    color: #ffffff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.stats-card-title i {
    color: #a78bfa;
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.6));
}

/* Visitor Map */
.visitor-map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 220px;
    background: radial-gradient(ellipse at center, rgba(15, 23, 42, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.visitor-map-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 30px rgba(102, 126, 234, 0.2);
    pointer-events: none;
}

/* 控制ClustrMaps地球仪大小 */
.visitor-map-container canvas,
.visitor-map-container > div,
.visitor-map-container iframe {
    max-width: 200px !important;
    max-height: 200px !important;
    transform: scale(0.85);
}

.map-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 2rem;
}

.map-placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.map-placeholder p {
    margin: 0;
    font-size: 0.9rem;
}

/* GitHub Chart */
.github-chart-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    overflow-x: auto;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.1);
}

.github-chart {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(1.1);
}

.github-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

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

.github-profile-link:hover::before {
    left: 100%;
}

.github-profile-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    color: #ffffff;
}

/* Stats Section Mobile Responsive */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-section {
        padding: 3rem 0;
    }
    
    .stats-title {
        font-size: 1.8rem;
    }
    
    .visitor-map-container {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .stats-card {
        padding: 1rem;
    }
    
    .github-chart-container {
        padding: 1rem;
    }
    
    .github-profile-link {
        width: 100%;
        justify-content: center;
    }
    
    .visitor-map-container {
        height: 250px;
    }
}