/* ==================== 全局样式 ==================== */
:root {
    /* 默认字体变量 */
    --en-font: "Poppins";
    --zh-font: "ZCOOL KuaiLe";
}

body {
    /* 背景渐变色：从浅粉色到浅青绿色的135度渐变 */
    background: linear-gradient(135deg, #fdf2f8 0%, #f0fdfa 100%);
    background-attachment: fixed;
    font-family: var(--en-font), var(--zh-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /* 主题、文字颜色、布局响应式变化时的综合过渡动画 */
    transition: all 0.5s ease;
}

/* ==================== 暗色模式基础样式 ==================== */
body.dark {
    /* 暗色模式文字颜色 */
    color: #d1d5db;
    /* 暗色模式背景渐变：深紫色到深青绿色 */
    background: linear-gradient(135deg, #2d1b41 0%, #1a3636 100%);
    /* 背景固定 */
    background-attachment: fixed;
}

/* ==================== 毛玻璃卡片样式 ==================== */
.card {
    /* 卡片背景：白色，透明度85% */
    background: rgba(255, 255, 255, 0.85);
    /* 毛玻璃效果：模糊10px */
    backdrop-filter: blur(10px);
    /* 圆角12px */
    border-radius: 12px;
    /* 阴影效果：0偏移 4px模糊 20px扩散，黑色透明度5% */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* 边框：白色，透明度20% */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 宽度、高度、背景色、阴影等所有变化的过渡动画 */
    transition: all 0.5s ease;
}

/* 联系板块卡片hover效果 */
#contact .card:hover {
    /* hover时背景色变化（强制覆盖） */
    background: rgba(229, 229, 229, 0.9) !important;
    /* hover时阴影加深（强制覆盖） */
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 暗色模式下的卡片样式 */
body.dark .card {
    /* 暗色模式卡片背景：黑色，透明度60% */
    background: rgba(0, 0, 0, 0.6);
    /* 暗色模式阴影：更明显 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    /* 暗色模式边框：白色，透明度10% */
    border-color: rgba(255, 255, 255, 0.1);
}

/* 暗色模式下联系板块卡片hover效果 */
body.dark #contact .card:hover {
    background: rgba(50, 50, 50, 0.7) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25) !important;
}

/* ==================== 小标签样式 ==================== */
.tag {
    /* 行内块级元素，可设置宽高和内外边距 */
    display: inline-block;
    /* 内边距：上下2px，左右8px */
    padding: 2px 8px;
    /* 字体大小12px */
    font-size: 12px;
    /* 圆角4px */
    border-radius: 4px;
    /* 背景：白色，透明度70% */
    background: rgba(255, 255, 255, 0.7);
    /* 文字颜色：灰色 */
    color: #6b7280;
    /* 右边距4px */
    margin-right: 4px;
    /* 过渡动画 */
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* 暗色模式下的标签样式 */
body.dark .tag {
    background: rgba(0, 0, 0, 0.5);
    color: #d1d5db;
}

/* ==================== 全局通用样式 ==================== */
html {
    /* 平滑滚动：点击锚点链接时平滑滚动到对应位置 */
    scroll-behavior: smooth;
}

/* ==================== 暗色模式文字颜色适配 ==================== */
/* 覆盖Tailwind默认的灰色文字颜色，适配暗色模式 */
body.dark .text-gray-800 {
    color: #f3f4f6 !important;
}

body.dark .text-gray-600 {
    color: #d1d5db !important;
}

body.dark .text-gray-500 {
    color: #9ca3af !important;
}

body.dark .text-gray-400 {
    color: #9ca3af !important;
}

/* 粉色hover效果适配 */
body.dark .hover\:text-pink-500:hover {
    color: #f472b6 !important;
}

body.dark .text-pink-400 {
    color: #f472b6 !important;
}

body.dark .text-pink-500 {
    color: #ec4899 !important;
}

/* 半透明白色背景适配 */
body.dark .bg-white\/70 {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

body.dark .bg-white\/60 {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

body.dark .text-gray-700 {
    color: #f3f4f6 !important;
}

/* ==================== 自定义暗色模式按钮样式 ==================== */
.theme-btn-dark {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #3B82F6 !important;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1) !important;
}

/* ==================== 板块标题图标样式 ==================== */
.section-icon {
    /* 图标右边距6px */
    margin-right: 6px;
    /* 图标颜色：粉色 */
    color: #ec4899;
}

/* 暗色模式下板块图标颜色 */
body.dark .section-icon {
    color: #f472b6 !important;
}

/* 回到顶部按钮 + HTTP3/Github链接 统一配色 */
#toTop,
.github-link {
    color: #9333ea !important;
    /* 紫色 */
}

/* hover时颜色变化 */
.github-link:hover {
    color: #7e22ce !important;
    /* 深紫色 */
}

/* 暗色模式下的配色 */
body.dark #toTop,
body.dark .github-link {
    color: #ffcc00 !important;
    /* 黄色 */
}

body.dark .github-link:hover {
    color: #fbbf24 !important;
    /* 深黄色 */
}

/* 回到顶部按钮基础样式 */
#toTop {
    background: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* 暗色模式下回到顶部按钮样式 */
body.dark #toTop {
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

/* ========== 新增：暗黑模式下按钮hover样式 ========== */
/* 换一句按钮 暗黑模式 hover 效果 */
body.dark #changeSentenceBtn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #f3f4f6 !important;
}

/* L菌の导航站按钮 暗黑模式 hover 效果 */
body.dark a[href="navigation.html"]:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #f3f4f6 !important;
}

/* 优化原有按钮基础样式，确保过渡效果统一 */
#changeSentenceBtn,
a[href="navigation.html"] {
    transition: all 0.3s ease !important;
}