@charset "UTF-8";
/* CSS变量定义 - 项目主题配置 */
:root {
    /* 主题色彩 - 蓝色系主色调 */
    --primary-color: #2563eb;
    /* 主蓝色 */
    --primary-dark: #1e40af;
    /* 深蓝色 */
    --primary-light: #60a5fa;
    /* 浅蓝色 */
    --secondary-color: #3b82f6;
    /* 次要蓝色 */
    --accent-color: #1d4ed8;
    /* 强调色 */
    --accent-light: #93c5fd;
    /* 浅强调色 */

    /* 渐变背景 */
    --gradient-1: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    /* 主渐变 */
    --gradient-2: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
    /* 次要渐变 */
    --gradient-3: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    /* 强调渐变 */

    /* 背景和表面颜色 */
    --background-color: #ffffff;
    /* 页面背景色 */
    --surface-color: #ffffff;
    /* 表面色 */
    --card-background: #ffffff;
    /* 卡片背景色 */
    --glass-background: rgba(255, 255, 255, 0.95);
    /* 玻璃效果背景 */

    /* 文本颜色 */
    --text-primary: #374151;
    /* 主要文本色 */
    --text-secondary: #6b7280;
    /* 次要文本色 */
    --text-muted: #9ca3af;
    /* 弱化文本色 */
    --heading-color: #1f2937;
    /* 标题文本色 */

    /* 边框和阴影 */
    --border-color: #f1f5f9;
    /* 边框色 */
    --border-light: #f8fafc;
    /* 浅边框色 */
    --shadow-sm: 0 1px 2px 0 rgba(37, 99, 235, 0.05);
    /* 小阴影 */
    --shadow-md: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
    /* 中阴影 */
    --shadow-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.1);
    /* 大阴影 */
    --shadow-xl: 0 20px 25px -5px rgba(37, 99, 235, 0.1);
    /* 超大阴影 */
    --shadow-color: rgba(37, 99, 235, 0.1);
    /* 阴影颜色 */

    /* 字体设置 */
    --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
    /* 正文字体 */
    --font-family-title: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
    /* 标题字体 */
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    /* 等宽字体 */

    /* 间距系统 */
    --space-xs: 0.5rem;
    /* 超小间距 */
    --space-sm: 1rem;
    /* 小间距 */
    --space-md: 1.5rem;
    /* 中间距 */
    --space-lg: 2rem;
    /* 大间距 */
    --space-xl: 3rem;
    /* 超大间距 */
    --space-2xl: 4rem;
    /* 2倍超大间距 */

    /* 圆角设置 */
    --radius-sm: 0.375rem;
    /* 小圆角 */
    --radius-md: 0.5rem;
    /* 中圆角 */
    --radius-lg: 0.75rem;
    /* 大圆角 */
    --radius-xl: 1rem;
    /* 超大圆角 */
    --radius-2xl: 1.5rem;
    /* 2倍超大圆角 */
    --radius-full: 9999px;
    /* 全圆角 */

    /* 动画过渡 */
    --transition-fast: 150ms ease-out;
    /* 快速过渡 */
    --transition-normal: 250ms ease-out;
    /* 正常过渡 */
    --transition-slow: 350ms ease-out;
    /* 慢速过渡 */
}

/* 全局重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* 盒模型设置 */
}

/* 基础HTML样式 */
html {
    scroll-behavior: smooth;
    /* 平滑滚动 */
    -webkit-font-smoothing: antialiased;
    /* 字体抗锯齿 */
    -moz-osx-font-smoothing: grayscale;
    /* macOS字体渲染 */
}

/* 主体样式 */
body {
    font-family: var(--font-family-body);
    /* 正文字体 */
    line-height: 1.6;
    /* 行高设置 */
    color: var(--text-primary);
    /* 文本颜色 */
    overflow-x: hidden;
    /* 隐藏水平滚动 */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    /* 字体特性 */
    position: relative;
    /* 相对定位 */
}

/* 背景渐变遮罩 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 248, 252, 0.95) 50%,
            rgba(255, 255, 255, 0.98) 100%);
    /* 渐变背景 */
    backdrop-filter: blur(4px);
    /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(4px);
    /* 浏览器兼容 */
    pointer-events: none;
    /* 不响应鼠标事件 */
    z-index: -1;
    /* 置于底层 */
}

/* 链接基础样式 */
a {
    text-decoration: none;
    /* 去除下划线 */
    color: inherit;
    /* 继承父级颜色 */
    transition: all var(--transition-normal);
    /* 过渡动画 */
}

/* 链接悬停效果 */
a:hover {
    transform: translateY(-1px);
    /* 上浮效果 */
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    /* 滚动条宽度 */
    height: 8px;
    /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
    background: var(--border-light);
    /* 滚动条轨道背景 */
}

::-webkit-scrollbar-thumb {
    background: var(--primary-light);
    /* 滚动条滑块 */
    border-radius: var(--radius-full);
    /* 圆形滑块 */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
    /* 悬停时颜色 */
}

/* 容器布局 */
.container {
    max-width: 1200px;
    /* 最大宽度 */
    margin: 0 auto;
    /* 水平居中 */
    padding: 20px;
    /* 内边距 */
}

/* 头部导航栏样式 */
header {
    background: rgba(255, 255, 255, 0.85);
    /* 半透明背景 */
    backdrop-filter: blur(40px);
    /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(40px);
    /* 浏览器兼容 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    /* 底部边框 */
    position: sticky;
    /* 粘性定位 */
    top: 0;
    /* 顶部固定 */
    z-index: 50;
    /* 层级 */
    transition: all var(--transition-normal);
    /* 过渡动画 */
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    /* 阴影效果 */
}

/* 头部背景遮罩 */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05));
    /* 渐变遮罩 */
    pointer-events: none;
    /* 不响应鼠标事件 */
}

/* 头部顶部装饰线 */
header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    /* 渐变线条 */
    pointer-events: none;
    /* 不响应鼠标事件 */
}

/* 滚动时头部样式 */
header.scrolled {
    box-shadow: 0 12px 40px rgba(0, 112, 243, 0.2);
    /* 增强阴影 */
    background: rgba(255, 255, 255, 0.95);
    /* 更不透明背景 */
    border-bottom: 1px solid rgba(0, 112, 243, 0.4);
    /* 蓝色边框 */
    backdrop-filter: blur(35px);
    /* 模糊效果 */
    -webkit-backdrop-filter: blur(35px);
    /* 浏览器兼容 */
}

/* 导航栏布局 */
nav {
    display: flex;
    /* 弹性布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中 */
    flex-wrap: wrap;
    /* 允许换行 */
    position: relative;
    /* 相对定位 */
}

/* Logo样式 */
.logo {
    font-size: 1.75rem;
    /* 字体大小 */
    font-weight: 800;
    /* 字体粗细 */
    background: linear-gradient(135deg, #ff6b8b, #8b5cf6);
    /* 渐变背景 */
    background-clip: text;
    /* 文字渐变 */
    -webkit-background-clip: text;
    /* 浏览器兼容 */
    -webkit-text-fill-color: transparent;
    /* 透明文字 */
    text-decoration: none;
    /* 无下划线 */
    letter-spacing: -0.025em;
    /* 字间距 */
    transition: all var(--transition-normal);
    /* 过渡动画 */
    position: relative;
    /* 相对定位 */
    text-shadow: 0 4px 12px rgba(255, 107, 139, 0.3);
    /* 文字阴影 */
    animation: logoFloat 3s ease-in-out infinite;
    /* 浮动动画 */
    font-family: var(--font-family-title);
    /* 标题字体 */
}

/* Logo浮动动画 */
@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        /* 初始位置 */
        filter: drop-shadow(0 4px 12px rgba(255, 107, 139, 0.4));
        /* 阴影 */
    }

    33% {
        transform: translateY(-3px) rotate(-2deg);
        /* 上浮旋转 */
        filter: drop-shadow(0 8px 20px rgba(139, 92, 246, 0.5));
        /* 阴影变化 */
    }

    66% {
        transform: translateY(-1px) rotate(2deg);
        /* 轻微旋转 */
        filter: drop-shadow(0 6px 16px rgba(168, 85, 247, 0.45));
        /* 阴影 */
    }
}

/* Logo悬停效果 */
.logo:hover {
    transform: scale(1.1) translateY(-3px);
    /* 放大上浮 */
    filter: drop-shadow(0 16px 40px rgba(255, 107, 139, 0.7));
    /* 增强阴影 */
    animation: none;
    /* 停止动画 */
}

/* Logo下划线效果 */
.logo::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #ff6b8b, #8b5cf6, #a855f7);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-normal);
    border-radius: var(--radius-full);
}

/* Logo下划线悬停效果 */
.logo:hover::after {
    transform: scaleX(1);
    /* 展开下划线 */
    transform-origin: left;
    /* 从左开始展开 */
}

/* 导航链接容器 */
.nav-links {
    display: flex;
    /* 弹性布局 */
    gap: var(--space-sm);
    /* 间距 */
    list-style: none;
    /* 去除列表样式 */
    align-items: center;
    /* 垂直居中 */
}

/* 导航链接样式 */
.nav-links a {
    text-decoration: none;
    /* 去除下划线 */
    color: var(--text-secondary);
    /* 次要文本色 */
    font-weight: 600;
    /* 字体粗细 */
    font-size: 0.95rem;
    /* 字体大小 */
    transition: all var(--transition-normal);
    /* 过渡动画 */
    position: relative;
    /* 相对定位 */
    padding: var(--space-xs) var(--space-sm);
    /* 内边距 */
    border-radius: var(--radius-xl);
    /* 圆角 */
    border: 2px solid transparent;
    /* 透明边框 */
    background: rgba(255, 255, 255, 0.8);
    /* 半透明背景 */
    backdrop-filter: blur(10px);
    /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    /* 浏览器兼容 */
}

/* 导航链接背景遮罩 */
.nav-links a::before {
    content: '';
    position: absolute;
    inset: 0;
    /* 填充整个元素 */
    background: linear-gradient(135deg, #ff6b8b, #8b5cf6);
    /* 渐变背景 */
    border-radius: var(--radius-xl);
    /* 圆角 */
    opacity: 0;
    /* 初始透明 */
    transition: all var(--transition-normal);
    /* 过渡动画 */
    z-index: -1;
    /* 置于底层 */
}

/* 导航链接悬停效果 */
.nav-links a:hover {
    color: white;
    /* 白色文字 */
    transform: translateY(-3px) scale(1.05);
    /* 上浮放大 */
    box-shadow: 0 8px 20px rgba(255, 107, 139, 0.4);
    /* 阴影效果 */
    border-color: rgba(255, 107, 139, 0.3);
    /* 边框颜色 */
}

/* 导航链接悬停时背景显示 */
.nav-links a:hover::before {
    opacity: 1;
    /* 显示背景 */
}

/* 激活状态导航链接 */
.nav-links a.active {
    color: white;
    /* 白色文字 */
    background: linear-gradient(135deg, #ff6b8b, #8b5cf6);
    /* 渐变背景 */
    box-shadow: 0 4px 15px rgba(255, 107, 139, 0.5);
    /* 阴影效果 */
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
    display: none;
    /* 默认隐藏 */
    background: none;
    /* 无背景 */
    border: none;
    /* 无边框 */
    font-size: 1.5em;
    /* 图标大小 */
    color: var(--primary-color);
    /* 主色调 */
    cursor: pointer;
    /* 手型光标 */
    padding: 8px;
    /* 内边距 */
    border-radius: 8px;
    /* 圆角 */
    transition: all 0.3s ease;
    /* 过渡动画 */
}

/* 移动端菜单按钮悬停 */
.mobile-menu-btn:hover {
    background: rgba(0, 123, 255, 0.1);
    /* 浅色背景 */
}

/* 移动端菜单容器样式 - 响应式设计的移动端导航菜单 */
.mobile-menu {
    display: none;
    /* 默认隐藏，通过JavaScript控制显示 */
    position: absolute;
    /* 绝对定位，相对于父元素 */
    top: 100%;
    /* 定位到导航栏底部 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    background: rgba(255, 255, 255, 0.95);
    /* 半透明白色背景，95%透明度 */
    backdrop-filter: blur(20px);
    /* 毛玻璃模糊效果，20px模糊半径 */
    -webkit-backdrop-filter: blur(20px);
    /* Safari浏览器兼容性 */
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
    /* 阴影效果：水平0，垂直12px，模糊40px */
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    /* 圆角：仅底部有圆角，形成下拉效果 */
    padding: var(--space-lg);
    /* 内边距使用大间距变量 */
    margin-top: 10px;
    /* 顶部外边距10px，与导航栏保持间距 */
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* 边框：1px实线，黑色10%透明度 */
}

/* 移动端菜单激活状态样式 - 显示菜单并添加动画效果 */
.mobile-menu.active {
    display: block;
    /* 显示菜单 */
    animation: slideDown 0.3s ease;
    /* 应用下拉动画：持续0.3秒，缓动效果 */
}

/* 下拉动画定义 - 菜单展开时的滑动效果 */
@keyframes slideDown {
    from {
        opacity: 0;
        /* 起始状态：完全透明 */
        transform: translateY(-10px);
        /* 起始位置：向上偏移10px */
    }

    to {
        opacity: 1;
        /* 结束状态：完全不透明 */
        transform: translateY(0);
        /* 结束位置：回到原始位置 */
    }
}

/* 移动端菜单链接样式 - 移动端导航菜单中的链接项 */
.mobile-menu a {
    display: block;
    /* 块级显示，占满容器宽度 */
    padding: 12px 20px;
    /* 内边距：上下12px，左右20px */
    color: var(--text-color);
    /* 文本颜色使用文本色变量 */
    text-decoration: none;
    /* 去除下划线 */
    font-weight: 500;
    /* 字体粗细500（中等） */
    border-radius: 8px;
    /* 圆角8px */
    margin-bottom: 5px;
    /* 底部外边距5px，项与项之间的间距 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画：持续0.3秒，缓动效果 */
}

/* 移动端菜单链接悬停效果 - 用户交互时的视觉反馈 */
.mobile-menu a:hover {
    background: rgba(0, 123, 255, 0.1);
    /* 背景色：蓝色10%透明度的浅色背景 */
    color: var(--primary-color);
    /* 文本颜色变为主色调 */
    transform: translateX(5px);
    /* 向右偏移5px，创建滑动效果 */
}
/* 英雄区域样式 - 网站主横幅区域 */
/* 英雄区域样式 - 网站主横幅区域 */
.hero {
    /* 背景图 + 白色遮罩 */
    background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20));
    /* 白色遮罩层，提高文字可读性 */

    background-attachment: scroll;
    background-size: cover;
    background-position: center;

    color: var(--text-primary, #333);
    text-align: center;
    padding: 8rem 1.5rem;
    margin-bottom: 3rem;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(255, 107, 139, 0.15);
}

/* 英雄区域背景图 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://piccdn.com.cn/PC/983d2fac5b6e49551d3ac8c4b7000bf8.webp');
    background-attachment: scroll;
    background-size: cover;
    background-position: center;
    filter: blur(5px); /* 高斯模糊效果 */
    z-index: -1; /* 确保背景在文字下方 */
}

/* 英雄区域内容包装容器 */
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px; /* 限制最大宽度，防止内容过宽 */
    margin: 0 auto; /* 居中对齐 */
    padding: 0 1rem; /* 增加左右内边距，防止内容紧贴边缘 */
}

/* 英雄区域主标题样式 */
.hero h1 {
    font-family: var(--font-family-title, sans-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    margin-bottom: var(--space-md, 1.5rem);
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    letter-spacing: -0.05em;
    animation: fadeInUp 0.8s ease-out;
}

/* 英雄区域副标题样式 */
.hero h2 {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 300;
    margin-bottom: var(--space-lg, 2rem);
    opacity: 0.95;
    animation: fadeInUp 0.8s ease-out 0.1s both;
}

/* 英雄区域段落文本样式 */
.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 700px;
    margin: 0 auto var(--space-xl, 2.5rem);
    opacity: 0.9;
    line-height: 1.7;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* 淡入上浮动画定义 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 淡入上浮动画定义 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 按钮基础样式 - 主要交互按钮 */
.btn {
    display: inline-flex;
    /* 行内弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    background: linear-gradient(135deg, #ff6b8b, #8b5cf6);
    /* 渐变背景：粉红到紫色135度渐变 */
    color: white;
    /* 文字颜色白色 */
    padding: var(--space-sm) var(--space-lg);
    /* 内边距：上下使用小间距，左右使用大间距变量 */
    border-radius: var(--radius-full);
    /* 完全圆角，形成胶囊形状 */
    text-decoration: none;
    /* 去除下划线 */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    font-size: 1rem;
    /* 字体大小1rem */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 边框：2px实线，黑色10%透明度 */
    cursor: pointer;
    /* 鼠标指针为手型 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    min-width: 140px;
    /* 最小宽度140px */
    box-shadow: 0 8px 32px rgba(255, 107, 139, 0.25);
    /* 阴影效果：水平0，垂直8px，模糊32px，粉红色调25%透明度 */
    animation: fadeInUp 0.8s ease-out 0.3s both;
    /* 淡入上浮动画，延迟0.3秒 */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    /* 文字阴影：轻微立体效果 */
    letter-spacing: 0.5px;
    /* 字间距0.5px */
}

/* 按钮前伪元素 - 创建光泽效果层 */
.btn::before {
    content: '';
    /* 必须设置content */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    bottom: 0;
    /* 底部对齐 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    /* 白色渐变光泽效果 */
    border-radius: inherit;
    /* 继承父元素圆角 */
    z-index: -1;
    /* 置于按钮内容之下 */
}

/* 按钮后伪元素 - 创建点击涟漪效果 */
.btn::after {
    content: '';
    /* 必须设置content */
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    width: 0;
    /* 初始宽度为0 */
    height: 0;
    /* 初始高度为0 */
    border-radius: 50%;
    /* 圆形 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
    /* 白色渐变背景 */
    transform: translate(-50%, -50%);
    /* 居中定位 */
    transition: width 0.6s, height 0.6s;
    /* 宽度和高度过渡动画 */
    z-index: -1;
    /* 置于按钮内容之下 */
}

/* 按钮悬停状态效果 */
.btn:hover {
    transform: translateY(-3px) scale(1.05);
    /* 上浮3px并放大5% */
    box-shadow: 0 12px 40px rgba(255, 107, 139, 0.4);
    /* 增强阴影效果 */
    border-color: rgba(255, 255, 255, 0.6);
    /* 边框颜色变为白色60%透明度 */
    background: linear-gradient(135deg, #ff4777, #a855f7);
    /* 改变渐变背景颜色 */
}

/* 按钮悬停时后伪元素效果 - 涟漪动画 */
.btn:hover::after {
    width: 300px;
    /* 宽度扩展到300px */
    height: 300px;
    /* 高度扩展到300px */
}

/* 按钮激活状态（点击时）效果 */
.btn:active {
    transform: translateY(-1px) scale(0.98);
    /* 轻微上浮1px并缩小2% */
}

/* 通用内容区块样式 - 适用于所有主要内容区域 */
section {
    padding: var(--space-2xl) 0;
    /* 上下内边距使用超大间距变量 */
    margin-bottom: var(--space-2xl);
    /* 底部外边距使用超大间距变量 */
    background: rgba(255, 255, 255, 0.95);
    /* 半透明白色背景，95%透明度 */
    backdrop-filter: blur(30px);
    /* 毛玻璃模糊效果，30px模糊半径 */
    -webkit-backdrop-filter: blur(30px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-2xl);
    /* 圆角使用2倍超大圆角变量 */
    box-shadow:
        0 15px 40px rgba(255, 107, 139, 0.15),
        /* 外部阴影：水平0，垂直15px，模糊40px，粉红色调 */
        inset 0 0 50px rgba(255, 255, 255, 0.8),
        /* 内部高光：白色发光效果 */
        inset 0 0 30px rgba(255, 107, 139, 0.05);
    /* 内部阴影：粉红色调装饰 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
}

/* 区块悬停状态效果 */
section:hover {
    transform: translateY(-3px);
    /* 鼠标悬停时上浮3px */

}

/* 区块顶部装饰线伪元素 */
section::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    height: 3px;
    /* 高度3px */
    background: linear-gradient(90deg, #0070f3, #0066ff, #3d8bfd);
    /* 水平渐变：蓝色系渐变 */
    opacity: 0.4;
    /* 透明度40% */
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    /* 圆角：仅顶部有圆角 */
}



/* 区块标题样式 */
section h2 {
    text-align: center;
    /* 文本居中对齐 */
    font-size: clamp(2rem, 4vw, 2.5rem);
    /* 响应式字体大小：最小2rem，基于视口宽度4%，最大2.5rem */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    margin-bottom: var(--space-xl);
    /* 底部外边距使用超大间距变量 */
    color: var(--heading-color);
    /* 颜色使用标题色变量 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    padding-bottom: var(--space-sm);
    /* 底部内边距使用小间距变量 */
    letter-spacing: -0.025em;
    /* 字间距：负值使字母更紧凑 */
}

/* 标题下划线装饰效果 */
section h2::after {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    width: 80px;
    /* 宽度80px */
    height: 3px;
    /* 高度3px */
    background: var(--gradient-2);
    /* 背景使用次要渐变变量 */
    left: 50%;
    /* 左侧定位到50% */
    transform: translateX(-50%);
    /* 水平居中：向左偏移自身宽度的50% */
    bottom: 0;
    /* 底部对齐 */
    border-radius: var(--radius-full);
    /* 完全圆角 */
}

/* 功能网格布局 */
.features-grid {
    display: grid;
    /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    /* 响应式网格 */
    gap: var(--space-lg);
    /* 网格间距 */
    padding: 0 var(--space-md);
    /* 水平内边距 */
}

/* 功能卡片样式 - 展示网站功能特性的卡片组件 */
.feature-card {
    background: rgba(255, 255, 255, 0.9);
    /* 半透明白色背景，90%透明度 */
    backdrop-filter: blur(40px);
    /* 毛玻璃模糊效果，40px模糊半径 */
    -webkit-backdrop-filter: blur(40px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-2xl);
    /* 圆角使用2倍超大圆角变量 */
    padding: var(--space-2xl);
    /* 内边距使用2倍超大间距变量 */
    box-shadow: 0 20px 60px rgba(255, 107, 139, 0.15);
    /* 阴影效果：水平0，垂直20px，模糊60px，粉红色调 */
    text-align: center;
    /* 文本居中对齐 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 边框：2px实线，黑色10%透明度 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
}

/* 功能卡片顶部装饰线伪元素 */
.feature-card::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    height: 3px;
    /* 高度3px */
    background: linear-gradient(90deg, #ff6b8b, #8b5cf6, #a855f7);
    /* 水平渐变：粉红到紫色渐变 */
    transform: scaleX(0);
    /* 初始状态：宽度为0（隐藏） */
    transform-origin: left;
    /* 变换原点：左侧 */
    transition: transform var(--transition-normal);
    /* 变换属性使用正常过渡动画 */
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    /* 圆角：仅顶部有圆角 */
}

/* 功能卡片背景渐变遮罩伪元素 */
.feature-card::after {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    bottom: 0;
    /* 底部对齐 */
    background: linear-gradient(135deg, rgba(255, 107, 139, 0.08), rgba(139, 92, 246, 0.08));
    /* 135度渐变：粉红到紫色 */
    border-radius: inherit;
    /* 继承父元素圆角 */
    opacity: 0;
    /* 初始状态：完全透明 */
    transition: opacity var(--transition-normal);
    /* 透明度属性使用正常过渡动画 */
}

/* 功能卡片悬停状态效果 */
.feature-card:hover {
    transform: translateY(-10px) scale(1.05);
    /* 上浮10px并放大5% */
    box-shadow: 0 30px 60px rgba(255, 107, 139, 0.25);
    /* 增强阴影效果 */
    border-color: rgba(255, 107, 139, 0.4);
    /* 边框颜色变为粉红色调 */
    background: rgba(255, 255, 255, 0.95);
    /* 背景透明度增加为95% */
}

/* 功能卡片悬停时顶部装饰线展开效果 */
.feature-card:hover::before {
    transform: scaleX(1);
    /* 宽度扩展到100% */
}

/* 功能卡片悬停时背景遮罩显示效果 */
.feature-card:hover::after {
    opacity: 1;
    /* 完全不透明 */
}

/* 功能卡片图标样式 */
.feature-card .icon {
    font-size: 3rem;
    /* 图标大小3rem */
    margin-bottom: var(--space-md);
    /* 底部外边距使用中间距变量 */
    display: block;
    /* 块级显示 */
    background: linear-gradient(135deg, #0070f3, #0066ff);
    /* 渐变背景：蓝色系渐变 */
    background-clip: text;
    /* 背景裁剪到文字 */
    filter: drop-shadow(0 4px 12px rgba(0, 112, 243, 0.3));
    /* 投影滤镜：蓝色阴影 */
    text-shadow: 0 4px 8px rgba(0, 112, 243, 0.2);
    /* 文字阴影：增强立体感 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    animation: iconFloat 3s ease-in-out infinite;
    /* 图标浮动动画：持续3秒，无限循环 */
}

/* 图标浮动动画定义 */
@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    /* 起始和结束状态：垂直位置不变 */
    50% {
        transform: translateY(-5px);
    }

    /* 中间状态：上浮5px */
}

/* 功能卡片悬停时图标效果 */
.feature-card:hover .icon {
    transform: scale(1.1) rotate(5deg);
    /* 放大10%并旋转5度 */
    filter: drop-shadow(0 8px 20px rgba(0, 112, 243, 0.5));
    /* 增强投影效果 */
}

/* 功能卡片标题样式 */
.feature-card h3 {
    color: var(--heading-color);
    /* 颜色使用标题色变量 */
    font-size: 1.25rem;
    /* 字体大小1.25rem */
    font-weight: 600;
    /* 字体粗细600（半粗体） */
    margin-bottom: var(--space-sm);
    /* 底部外边距使用小间距变量 */
    letter-spacing: -0.025em;
    /* 字间距：负值使字母更紧凑 */
}

/* 功能卡片描述文本样式 */
.feature-card p {
    color: var(--text-secondary);
    /* 颜色使用次要文本色变量 */
    line-height: 1.7;
    /* 行高1.7倍 */
    font-size: 0.95rem;
    /* 字体大小0.95rem */
}

/* 教程步骤容器样式 - 展示使用教程的步骤列表容器 */
.tutorial-steps {
    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 垂直方向排列 */
    gap: 30px;
    /* 步骤之间的间距30px */
    padding: 0 20px;
    /* 水平内边距20px，垂直无内边距 */
}

/* 步骤卡片样式 - 单个教程步骤的卡片容器 */
.step-card {
    background-color: var(--background-color);
    /* 背景颜色使用背景色变量 */
    padding: 30px;
    /* 内边距30px */
    border-radius: 8px;
    /* 圆角8px */
    box-shadow: 0 2px 4px var(--shadow-color);
    /* 阴影效果：水平0，垂直2px，模糊4px，使用阴影色变量 */
    display: flex;
    /* 弹性布局 */
    align-items: flex-start;
    /* 顶部对齐 */
    gap: 20px;
    /* 元素之间的间距20px */
    border: 1px solid var(--border-color);
    /* 边框：1px实线，使用边框色变量 */
}

/* 步骤编号样式 - 教程步骤的圆形编号指示器 */
.step-number {
    font-size: 2em;
    /* 字体大小2em，相对较大 */
    font-weight: bold;
    /* 字体粗细粗体 */
    color: var(--primary-color);
    /* 文本颜色使用主色调变量 */
    flex-shrink: 0;
    /* 不允许收缩，保持固定大小 */
    width: 50px;
    /* 固定宽度50px */
    height: 50px;
    /* 固定高度50px */
    border-radius: 50%;
    /* 完全圆角，形成圆形 */
    background-color: rgba(0, 123, 255, 0.1);
    /* 背景色：蓝色10%透明度的浅色背景 */
    display: flex;
    /* 弹性布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

/* 步骤内容标题样式 - 教程步骤的标题文字 */
.step-content h3 {
    color: var(--heading-color);
    /* 文本颜色使用标题色变量 */
    margin-top: 0;
    /* 顶部外边距为0，去除默认间距 */
    margin-bottom: 10px;
    /* 底部外边距10px，与内容保持间距 */
}

/* 步骤代码块样式 - 教程中展示代码示例的预格式化文本 */
.step-content pre {
    background-color: #e9ecef;
    /* 背景色：浅灰色背景 */
    padding: 15px;
    /* 内边距15px */
    border-radius: 5px;
    /* 圆角5px */
    overflow-x: auto;
    /* 水平方向溢出时显示滚动条 */
    overflow-y: hidden;
    /* 隐藏垂直滚动条 */
    white-space: pre-wrap;
    /* 保留空格和换行，允许自动换行 */
    word-break: break-word;
    /* 允许在单词边界断行，更适合长URL */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    /* 等宽字体族，确保代码对齐 */
    font-size: 0.85em;
    /* 字体大小0.85em，稍小于正文字体，移动端更合适 */
    color: #333;
    /* 文本颜色深灰色 */
    line-height: 1.4;
    /* 行高1.4倍，提高可读性 */
    max-width: 100%;
    /* 最大宽度100%，防止溢出 */
    box-sizing: border-box;
    /* 盒模型设置 */
}

/* 移动端代码块优化 */
@media (max-width: 768px) {
    .step-content pre {
        font-size: 0.8em;
        /* 移动端更小的字体 */
        padding: 12px;
        /* 减小内边距，节省空间 */
        margin: 10px 0;
        /* 增加上下间距 */
        border-radius: 8px;
        /* 增大圆角，触摸友好 */
    }
}

/* 链接转换器容器 - CDN链接转换工具的主要容器 */
.link-converter {
    padding: 60px 40px;
    /* 内边距：上下60px，左右40px */
    background: rgba(255, 255, 255, 0.95);
    /* 半透明白色背景，95%透明度 */
    backdrop-filter: blur(30px);
    /* 毛玻璃模糊效果，30px模糊半径 */
    -webkit-backdrop-filter: blur(30px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-2xl);
    /* 圆角使用2倍超大圆角变量 */
    box-shadow: 0 20px 50px rgba(255, 107, 139, 0.15);
    /* 阴影效果：水平0，垂直20px，模糊50px，粉红色调 */
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 边框：2px实线，黑色10%透明度 */
    margin-bottom: 60px;
    /* 底部外边距60px */
    text-align: center;
    /* 文本居中对齐 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
}

/* 链接转换器背景渐变遮罩伪元素 */
.link-converter::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    bottom: 0;
    /* 底部对齐 */
    background: linear-gradient(135deg, rgba(255, 107, 139, 0.06), rgba(139, 92, 246, 0.06));
    /* 135度渐变：粉红到紫色 */
    border-radius: inherit;
    /* 继承父元素圆角 */
    pointer-events: none;
    /* 不响应鼠标事件 */
}

/* 链接转换器顶部装饰线伪元素 */
.link-converter::after {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    height: 4px;
    /* 高度4px */
    background: linear-gradient(90deg, #ff6b8b, #8b5cf6, #a855f7);
    /* 水平渐变：粉红到紫色渐变 */
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    /* 圆角：仅顶部有圆角 */
    box-shadow: 0 2px 15px rgba(255, 107, 139, 0.5);
    /* 阴影效果：增强视觉层次 */
}

/* 链接转换器描述文本样式 */
.converter-description {
    font-size: 1.1em;
    /* 字体大小1.1em */
    color: var(--text-color);
    /* 颜色使用文本色变量 */
    margin-bottom: 25px;
    /* 底部外边距25px */
    line-height: 1.6;
    /* 行高1.6倍 */
    max-width: 800px;
    /* 最大宽度800px */
    margin-left: auto;
    /* 左侧外边距自动 */
    margin-right: auto;
    /* 右侧外边距自动 */
}

/* 链接转换器特性标签容器 */
.converter-features {
    display: flex;
    /* 弹性布局 */
    justify-content: center;
    /* 水平居中 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 15px;
    /* 间距15px */
    margin-bottom: 30px;
    /* 底部外边距30px */
}

/* 特性标签样式 - 展示功能特性 */
.feature-tag {
    background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
    /* 45度渐变：主色到强调色 */
    color: white;
    /* 文字颜色白色 */
    padding: 8px 16px;
    /* 内边距：上下8px，左右16px */
    border-radius: 20px;
    /* 圆角20px */
    font-size: 0.9em;
    /* 字体大小0.9em */
    font-weight: 500;
    /* 字体粗细500（中等） */
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
    /* 阴影效果：蓝色调 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画 */
}

/* 特性标签悬停效果 */
.feature-tag:hover {
    transform: translateY(-2px);
    /* 上浮2px */
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    /* 增强阴影效果 */
}

/* 默认CDN测试样式 - 展示默认CDN性能测试结果 */
.default-cdn-test {
    margin-top: 30px;
    /* 顶部外边距30px */
    padding: 30px;
    /* 内边距30px */
    background: rgba(255, 255, 255, 0.8);
    /* 半透明白色背景，80%透明度 */
    backdrop-filter: blur(20px);
    /* 毛玻璃模糊效果，20px模糊半径 */
    -webkit-backdrop-filter: blur(20px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-xl);
    /* 圆角使用超大圆角变量 */
    border: 2px solid rgba(102, 126, 234, 0.3);
    /* 边框：2px实线，蓝色30%透明度 */
    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
    /* 阴影效果：水平0，垂直12px，模糊40px */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
}

/* 默认CDN测试背景渐变遮罩伪元素 */
.default-cdn-test::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    bottom: 0;
    /* 底部对齐 */
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(16, 185, 129, 0.08));
    /* 135度渐变：青色到绿色 */
    border-radius: inherit;
    /* 继承父元素圆角 */
    pointer-events: none;
    /* 不响应鼠标事件 */
}

/* 默认CDN测试标题样式 */
.default-cdn-test h3 {
    margin-top: 0;
    /* 顶部外边距为0 */
    margin-bottom: 15px;
    /* 底部外边距15px */
    color: var(--primary-color);
    /* 颜色使用主色调变量 */
    text-align: center;
    /* 文本居中对齐 */
    font-size: 1.4em;
    /* 字体大小1.4em */
}

/* 默认CDN测试描述文本样式 */
.default-cdn-test p {
    text-align: center;
    /* 文本居中对齐 */
    color: var(--text-color);
    /* 颜色使用文本色变量 */
    margin-bottom: 20px;
    /* 底部外边距20px */
    font-size: 1.05em;
    /* 字体大小1.05em */
}

/* 默认CDN测试项目样式 */
.default-cdn-test .cdn-item {
    background: white;
    /* 背景白色 */
    margin-bottom: 12px;
    /* 底部外边距12px */
    border: 1px solid #dee2e6;
    /* 边框：1px实线，浅灰色 */
    border-radius: 8px;
    /* 圆角8px */
    padding: 15px;
    /* 内边距15px */
    display: flex;
    /* 弹性布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中对齐 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画 */
}

/* 默认CDN测试项目悬停效果 */
.default-cdn-test .cdn-item:hover {
    transform: translateY(-2px);
    /* 上浮2px */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
}

/* CDN名称样式 */
.default-cdn-test .cdn-name {
    font-weight: 600;
    /* 字体粗细600（半粗体） */
    color: #2c3e50;
    /* 深蓝色文字 */
    font-size: 1.1em;
    /* 字体大小1.1em */
}

/* CDN延迟显示样式 */
.default-cdn-test .cdn-latency {
    font-family: monospace;
    /* 等宽字体 */
    font-size: 1.1em;
    /* 字体大小1.1em */
    padding: 6px 12px;
    /* 内边距：上下6px，左右12px */
    border-radius: 20px;
    /* 圆角20px */
    color: white;
    /* 文字颜色白色 */
    min-width: 90px;
    /* 最小宽度90px */
    text-align: center;
    /* 文本居中对齐 */
}

/* 链接转换器标题样式 */
.link-converter h3 {
    color: var(--primary-color);
    /* 颜色使用主色调变量 */
    font-size: 1.8em;
    /* 字体大小1.8em */
    margin-bottom: 20px;
    /* 底部外边距20px */
}

/* 转换器表单容器样式 */
.converter-form {
    max-width: 800px;
    /* 最大宽度800px */
    margin: 0 auto;
    /* 水平居中 */
}

/* 输入组合样式 - 链接转换输入区域 */
.input-group {
    display: flex;
    /* 弹性布局 */
    margin-bottom: var(--space-lg);
    /* 底部外边距使用大间距变量 */
    background: rgba(255, 255, 255, 0.85);
    /* 半透明白色背景，85%透明度 */
    backdrop-filter: blur(35px);
    /* 毛玻璃模糊效果，35px模糊半径 */
    -webkit-backdrop-filter: blur(35px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-2xl);
    /* 圆角使用2倍超大圆角变量 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    box-shadow: 0 16px 50px rgba(31, 38, 135, 0.25);
    /* 阴影效果：水平0，垂直16px，模糊50px */
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 边框：2px实线，黑色10%透明度 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    max-width: 800px;
    /* 最大宽度800px */
    margin-left: auto;
    /* 左侧外边距自动 */
    margin-right: auto;
    /* 右侧外边距自动 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    transform: perspective(1000px) rotateX(0deg);
    /* 透视变换：初始角度为0度 */
}

/* 输入组合背景渐变遮罩伪元素 */
.input-group::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    bottom: 0;
    /* 底部对齐 */
    background: linear-gradient(135deg, rgba(0, 112, 243, 0.1), rgba(0, 102, 255, 0.1));
    /* 135度渐变：蓝色系 */
    border-radius: inherit;
    /* 继承父元素圆角 */
    z-index: -1;
    /* 置于底层 */
}

/* 输入组合聚焦状态效果 */
.input-group:focus-within {
    border-color: rgba(0, 112, 243, 0.8);
    /* 边框颜色变为蓝色80%透明度 */
    box-shadow: 0 0 0 4px rgba(0, 112, 243, 0.25), 0 16px 50px rgba(0, 112, 243, 0.3);
    /* 双重阴影效果 */
    transform: perspective(1000px) rotateX(-1deg) translateY(-2px);
    /* 透视变换：轻微旋转和上浮 */
}

/* 输入组文本输入框样式 - 链接转换器的URL输入框 */
.input-group input[type="text"] {
    flex: 1;
    /* 弹性布局：占据剩余空间 */
    padding: var(--space-lg) var(--space-xl);
    /* 内边距：上下使用大间距，左右使用超大间距变量 */
    border: none;
    /* 无边框，与父容器边框融合 */
    font-size: 1.1rem;
    /* 字体大小1.1rem，稍大于默认字体 */
    background: transparent;
    /* 透明背景，显示父容器背景 */
    color: var(--text-primary);
    /* 文本颜色使用主要文本色变量 */
    font-family: var(--font-family-body);
    /* 字体族使用正文字体变量 */
    font-weight: 500;
    /* 字体粗细500（中等） */
    letter-spacing: 0.01em;
    /* 字间距0.01em，轻微增加字母间距 */
}

/* 输入框占位符文本样式 - 提示用户输入内容的引导文字 */
.input-group input[type="text"]::placeholder {
    color: var(--text-muted);
    /* 占位符颜色使用弱化文本色变量 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
}

/* 输入框聚焦时占位符效果 - 聚焦时的占位符动画 */
.input-group input[type="text"]:focus::placeholder {
    transform: translateY(-2px);
    /* 向上偏移2px，创建上浮效果 */
    opacity: 0.7;
    /* 透明度降低为70%，更不明显 */
}

/* 输入框聚焦状态样式 - 去除默认的浏览器聚焦轮廓 */
.input-group input[type="text"]:focus {
    outline: none;
    /* 去除默认的聚焦轮廓线 */
}

/* 输入包装器样式 - 包含输入框和清空按钮 */
.input-wrapper {
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    flex: 1;
    /* 占据剩余空间 */
    position: relative;
    /* 相对定位 */
}

/* 输入组按钮样式 - 链接转换器的转换按钮 */
.input-group button {
    background: var(--gradient-2);
    /* 背景使用次要渐变变量 */
    color: white;
    /* 文本颜色白色 */
    border: none;
    /* 无边框 */
    padding: var(--space-lg) var(--space-2xl);
    /* 内边距：上下使用大间距，左右使用2倍超大间距变量 */
    cursor: pointer;
    /* 鼠标指针为手型 */
    font-size: 1.1rem;
    /* 字体大小1.1rem */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    font-family: var(--font-family-body);
    /* 字体族使用正文字体变量 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    min-width: 160px;
    /* 最小宽度160px，确保按钮有足够空间 */
    letter-spacing: 0.02em;
    /* 字间距0.02em，增加字母间距 */
    text-transform: uppercase;
    /* 文本转换为大写字母 */
}

/* 清空按钮样式 */
.clear-btn {
    width: 32px;
    /* 宽度32px */
    height: 32px;
    /* 高度32px */
    border: none;
    /* 无边框 */
    background: transparent;
    /* 透明背景 */
    cursor: pointer;
    /* 鼠标指针为手型 */
    color: #999;
    /* 默认颜色 */
    border-radius: 50%;
    /* 圆形按钮 */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: center;
    /* 水平居中对齐 */
    margin-right: 12px;
    /* 右侧外边距 */
    transition: all var(--transition-fast);
    /* 快速过渡动画 */
    opacity: 0.7;
    /* 默认透明度 */
}

/* 清空按钮悬停效果 */
.clear-btn:hover {
    color: #ff4757;
    /* 悬停时变为红色 */
    background: rgba(255, 71, 87, 0.1);
    /* 红色背景 */
    opacity: 1;
    /* 完全显示 */
    transform: scale(1.1);
    /* 轻微放大 */
}

/* 输入框有内容时清空按钮显示 */
.input-wrapper:has(input:not(:placeholder-shown)) .clear-btn {
    opacity: 1;
    /* 完全显示 */
}

/* 清空按钮激活状态 */
.clear-btn:active {
    transform: scale(0.95);
    /* 点击时缩小 */
}

/* 输入框样式调整 - 为清空按钮留出空间 */
.input-group input[type="text"] {
    flex: 1;
    /* 占据剩余空间 */
    padding: var(--space-lg) var(--space-xl);
    /* 内边距：上下使用大间距，左右使用超大间距变量 */
    border: none;
    /* 无边框，与父容器边框融合 */
    font-size: 1.1rem;
    /* 字体大小1.1rem，稍大于默认字体 */
    background: transparent;
    /* 透明背景，显示父容器背景 */
    color: var(--text-primary);
    /* 文本颜色使用主要文本色变量 */
    font-family: var(--font-family-body);
    /* 字体族使用正文字体变量 */
    font-weight: 500;
    /* 字体粗细500（中等） */
    letter-spacing: 0.01em;
    /* 字间距0.01em，轻微增加字母间距 */
}

/* 按钮涟漪效果伪元素 - 点击时产生的水波纹效果 */
.input-group button::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    width: 0;
    /* 初始宽度为0 */
    height: 0;
    /* 初始高度为0 */
    background: rgba(255, 255, 255, 0.2);
    /* 背景色：白色20%透明度 */
    border-radius: 50%;
    /* 圆形 */
    transform: translate(-50%, -50%);
    /* 居中定位 */
    transition: width 0.6s, height 0.6s;
    /* 宽度和高度过渡动画：持续0.6秒 */
}

/* 按钮悬停状态效果 */
.input-group button:hover {
    transform: scale(1.02);
    /* 放大2%，创建轻微放大效果 */
}

/* 按钮激活状态效果 - 点击时触发涟漪动画 */
.input-group button:active::before {
    width: 200px;
    /* 宽度扩展到200px */
    height: 200px;
    /* 高度扩展到200px，形成圆形涟漪 */
}

/* 结果区域容器样式 - 链接转换结果的展示区域 */
.result-section {
    margin-top: 30px;
    /* 顶部外边距30px，与输入区域保持间距 */
    text-align: left;
    /* 文本左对齐 */
}

/* 结果框样式 - 单个转换结果的展示卡片 */
.result-box {
    background: rgba(255, 255, 255, 0.9);
    /* 半透明白色背景，90%透明度 */
    backdrop-filter: blur(20px);
    /* 毛玻璃模糊效果，20px模糊半径 */
    -webkit-backdrop-filter: blur(20px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-2xl);
    /* 圆角使用2倍超大圆角变量 */
    padding: var(--space-2xl);
    /* 内边距使用2倍超大间距变量 */
    margin-bottom: var(--space-lg);
    /* 底部外边距使用大间距变量 */
    border: 2px solid rgba(255, 107, 139, 0.2);
    /* 边框：2px实线，粉红色调20%透明度 */
    box-shadow:
        0 8px 32px rgba(255, 107, 139, 0.15),
        /* 外部阴影：水平0，垂直8px，模糊32px，粉红色调 */
        inset 0 0 30px rgba(255, 255, 255, 0.6);
    /* 内部高光：白色发光效果 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
}

/* 结果框悬停状态效果 - 用户交互时的视觉反馈 */
.result-box:hover {
    transform: translateY(-3px);
    /* 上浮3px，创建悬浮效果 */
    box-shadow:
        0 12px 40px rgba(255, 107, 139, 0.2),
        /* 增强外部阴影效果 */
        inset 0 0 40px rgba(255, 255, 255, 0.7);
    /* 增强内部高光效果 */
    border-color: rgba(255, 107, 139, 0.3);
    /* 边框颜色变为粉红色调30%透明度 */
}

/* 结果框顶部装饰线伪元素 - 结果框顶部的彩色装饰线条 */
.result-box::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    height: 3px;
    /* 高度3px */
    background: linear-gradient(90deg, #ff6b8b, #8b5cf6, #a855f7);
    /* 水平渐变：粉红到紫色渐变 */
    opacity: 0.8;
    /* 透明度80% */
    box-shadow: 0 2px 10px rgba(255, 107, 139, 0.5);
    /* 阴影效果：增强视觉层次 */
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    /* 圆角：仅顶部有圆角 */
}

/* 结果框标题样式 */
.result-box h4 {
    color: var(--primary-color);
    /* 颜色使用主色调变量 */
    margin-bottom: var(--space-md);
    /* 底部外边距使用中间距变量 */
    font-size: 1.25rem;
    /* 字体大小1.25rem */
    font-weight: 600;
    /* 字体粗细600（半粗体） */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: var(--space-xs);
    /* 间距使用超小间距变量 */
}

/* 链接项目样式 - 转换结果中的链接项布局 */
.link-item {
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: var(--space-sm);
    /* 间距使用小间距变量 */
    margin-bottom: var(--space-md);
    /* 底部外边距使用中间距变量 */
    animation: slideInLeft 0.4s ease-out;
    /* 左侧滑入动画，持续0.4秒，缓出效果 */
}

/* 左侧滑入动画定义 - 链接项进入效果 */
@keyframes slideInLeft {
    from {
        opacity: 0;
        /* 起始状态：完全透明 */
        transform: translateX(-20px);
        /* 起始位置：向左偏移20px */
    }

    to {
        opacity: 1;
        /* 结束状态：完全不透明 */
        transform: translateX(0);
        /* 结束位置：回到原始位置 */
    }
}

/* 链接输入框样式 - 结果框中的链接显示区域 */
.link-input {
    flex: 1;
    /* 占据剩余空间 */
    padding: var(--space-sm) var(--space-md);
    /* 内边距：上下使用小间距，左右使用中间距变量 */
    border: 2px solid rgba(255, 107, 139, 0.3);
    /* 边框：2px实线，粉红色30%透明度 */
    border-radius: var(--radius-xl);
    /* 圆角使用超大圆角变量 */
    font-size: 0.9rem;
    /* 字体大小0.9rem */
    font-family: var(--font-family-mono);
    /* 字体使用等宽字体族 */
    background: rgba(255, 255, 255, 0.9);
    /* 半透明白色背景，90%透明度 */
    color: var(--text-primary);
    /* 颜色使用主要文本色变量 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    backdrop-filter: blur(10px);
    /* 毛玻璃模糊效果，10px模糊半径 */
    -webkit-backdrop-filter: blur(10px);
    /* Safari浏览器兼容性 */
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.5),
        /* 内部高光效果 */
        0 0 0 1px rgba(255, 255, 255, 0.8);
    /* 外部边框效果 */
}

/* 链接输入框聚焦状态效果 */
.link-input:focus {
    border-color: var(--primary-color);
    /* 边框颜色变为主色调 */
    outline: none;
    /* 去除默认轮廓线 */
    box-shadow:
        0 0 0 3px rgba(255, 107, 139, 0.1),
        /* 外部聚焦阴影效果 */
        inset 0 0 15px rgba(255, 255, 255, 0.6);
    /* 内部高光增强 */
    background: rgba(255, 255, 255, 0.95);
    /* 背景透明度增加为95% */
}

/* 链接状态标识样式 */
.link-status {
    font-size: 0.75rem;
    /* 字体大小稍小 */
    font-weight: 600;
    /* 字体粗细 */
    padding: 4px 8px;
    /* 内边距 */
    border-radius: var(--radius-sm);
    /* 小圆角 */
    margin-left: var(--space-xs);
    /* 左侧间距 */
    animation: fadeIn 0.3s ease-out;
    /* 淡入动画 */
}

.link-status.success {
    background: linear-gradient(135deg, #28a745, #20c997);
    /* 绿色渐变背景 */
    color: white;
    /* 白色文字 */
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    /* 绿色阴影 */
}

.link-status.error {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    /* 红色渐变背景 */
    color: white;
    /* 白色文字 */
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    /* 红色阴影 */
}

/* 淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* 起始透明 */
        transform: scale(0.8);
        /* 起始缩小 */
    }
    to {
        opacity: 1;
        /* 完全不透明 */
        transform: scale(1);
        /* 恢复大小 */
    }
}

/* 复制和访问按钮样式 */
.copy-btn,
.visit-btn {
    padding: var(--space-sm) var(--space-md);
    /* 内边距 */
    border: none;
    /* 无边框 */
    border-radius: var(--radius-full);
    /* 圆角 */
    cursor: pointer;
    /* 手型光标 */
    font-weight: 600;
    /* 字体粗细 */
    transition: all var(--transition-normal);
    /* 过渡动画 */
    font-size: 0.85rem;
    /* 字体大小 */
    position: relative;
    /* 相对定位 */
    overflow: hidden;
    /* 隐藏溢出 */
    color: white;
    /* 白色文字 */
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.2),
        /* 外部阴影 */
        inset 0 0 10px rgba(255, 255, 255, 0.3);
    /* 内部高光 */
}

/* 复制按钮样式 - 用于复制转换结果的绿色按钮 */
.copy-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    /* 渐变背景：绿色系渐变 */
}

/* 访问按钮样式 - 用于访问转换结果的蓝色按钮 */
.visit-btn {
    background: linear-gradient(135deg, #0066ff, #0052cc);
    /* 渐变背景：蓝色系渐变 */
}

/* 按钮涟漪效果伪元素 - 复制和访问按钮的点击动画效果 */
.copy-btn::before,
.visit-btn::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    width: 0;
    /* 初始宽度为0 */
    height: 0;
    /* 初始高度为0 */
    background: rgba(255, 255, 255, 0.2);
    /* 背景色：白色20%透明度 */
    border-radius: 50%;
    /* 圆形 */
    transform: translate(-50%, -50%);
    /* 居中定位 */
    transition: width 0.4s, height 0.4s;
    /* 宽度和高度过渡动画：持续0.4秒 */
}

/* 按钮悬停状态效果 - 复制和访问按钮的悬停交互 */
.copy-btn:hover,
.visit-btn:hover {
    transform: translateY(-2px);
    /* 上浮2px，创建悬浮效果 */
    box-shadow: var(--shadow-lg);
    /* 使用大阴影变量，增强立体感 */
}

/* 按钮激活状态效果 - 点击时触发涟漪动画 */
.copy-btn:active::before,
.visit-btn:active::before {
    width: 150px;
    /* 宽度扩展到150px */
    height: 150px;
    /* 高度扩展到150px，形成圆形涟漪 */
}

/* 错误提示框样式 - 显示转换错误信息 */
.error-box {
    background: #fff5f5;
    /* 浅红色背景 */
    color: #721c24;
    /* 深红色文字 */
    border: 1px solid #f5c6cb;
    /* 边框：1px实线，浅红色 */
    border-radius: 8px;
    /* 圆角8px */
    padding: 20px;
    /* 内边距20px */
    margin-bottom: 15px;
    /* 底部外边距15px */
    border-left: 4px solid #dc3545;
    /* 左侧边框：4px实线，红色 */
}

/* 成功消息样式 - 显示转换成功信息 */
.success-msg {
    color: #28a745;
    /* 绿色文字 */
    font-weight: bold;
    /* 字体粗细粗体 */
    margin-top: 15px;
    /* 顶部外边距15px */
    font-size: 1.1em;
    /* 字体大小1.1em */
}

/* CDN监测样式 - CDN性能监测容器 */
.cdn-monitor {
    margin-top: 20px;
    /* 顶部外边距20px */
    padding: 20px;
    /* 内边距20px */
    background: #f8f9fa;
    /* 浅灰色背景 */
    border-radius: 10px;
    /* 圆角10px */
    border: 1px solid #e9ecef;
    /* 边框：1px实线，浅灰色 */
}

/* CDN分组样式 */
.cdn-group {
    margin-bottom: 30px;
    /* 组间间距 */
}

.cdn-group:last-child {
    margin-bottom: 0;
    /* 最后一组无底部间距 */
}

/* CDN分组标题样式 */
.cdn-group-title {
    font-size: 1.1em;
    /* 字体大小 */
    font-weight: 600;
    /* 字体粗细 */
    color: var(--primary-color);
    /* 主色调 */
    margin-bottom: 15px;
    /* 底部间距 */
    padding-bottom: 8px;
    /* 底部内边距 */
    border-bottom: 2px solid var(--primary-light);
    /* 底部边框 */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 8px;
    /* 图标和文字间距 */
}

.cdn-group-title i {
    font-size: 1.2em;
    /* 图标大小 */
    color: var(--primary-color);
    /* 图标颜色 */
}

.cdn-monitor h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-color);
    text-align: center;
}

.cdn-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: white;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.cdn-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.cdn-name {
    font-weight: 600;
    color: #2c3e50;
}

/* CDN延迟显示样式 - 展示CDN性能测试结果的延迟数值 */
.cdn-latency {
    font-family: monospace;
    /* 等宽字体，确保数值对齐 */
    font-size: 1.1em;
    /* 字体大小1.1em */
    padding: 4px 10px;
    /* 内边距：上下4px，左右10px */
    border-radius: 20px;
    /* 圆角20px，形成胶囊形状 */
    color: white;
    /* 文字颜色白色 */
    min-width: 80px;
    /* 最小宽度80px，确保一致性 */
    text-align: center;
    /* 文本居中对齐 */
}

/* 优秀延迟状态样式 - 延迟极低的绿色标识 */
.latency-excellent {
    background-color: #28a745;
    /* 背景色：绿色 */
}

/* 良好延迟状态样式 - 延迟良好的黄色标识 */
.latency-good {
    background-color: #ffc107;
    /* 背景色：黄色 */
    color: #212529;
    /* 文字颜色深灰色，提高对比度 */
}

/* 较差延迟状态样式 - 延迟较差的红色标识 */
.latency-poor {
    background-color: #dc3545;
    /* 背景色：红色 */
}

/* 测试中延迟状态样式 - 正在测试时的灰色闪烁效果 */
.latency-testing {
    background-color: #6c757d;
    /* 背景色：灰色 */
    animation: pulse 1.5s infinite;
    /* 脉冲动画：持续1.5秒，无限循环 */
}

/* 错误状态样式 - 测试失败或错误的红色标识 */
.latency-error {
    background-color: #dc3545;
    /* 背景色：红色 */
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* 性能提示样式 */
.performance-tip {
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 性能提示标题样式 - 性能提示区域的小标题 */
.performance-tip h4 {
    margin-top: 0;
    /* 顶部外边距为0，去除默认间距 */
    margin-bottom: 15px;
    /* 底部外边距15px，与内容保持间距 */
    color: var(--primary-color);
    /* 颜色使用主色调变量 */
    font-size: 1.2em;
    /* 字体大小1.2em，稍大于正文字体 */
}

/* 性能提示段落文本样式 */
.performance-tip p {
    margin-bottom: 15px;
    /* 底部外边距15px，段落间保持间距 */
    color: var(--text-color);
    /* 颜色使用文本色变量 */
    line-height: 1.6;
    /* 行高1.6倍，提高可读性 */
}

/* 性能提示无序列表样式 */
.performance-tip ul {
    margin: 0;
    /* 外边距为0，去除默认间距 */
    padding-left: 20px;
    /* 左侧内边距20px，缩进列表 */
    color: var(--text-color);
    /* 颜色使用文本色变量 */
}

/* 性能提示列表项样式 */
.performance-tip li {
    margin-bottom: 8px;
    /* 底部外边距8px，列表项间保持间距 */
    line-height: 1.5;
    /* 行高1.5倍，列表项内文字排版 */
}

/* 性能指示器样式 - 显示性能测试结果的视觉标识 */
.performance-indicator {
    display: inline-block;
    /* 行内块级显示 */
    padding: 4px 8px;
    /* 内边距：上下4px，左右8px */
    border-radius: 12px;
    /* 圆角12px */
    font-size: 0.85em;
    /* 字体大小0.85em，稍小于正文字体 */
    font-weight: 600;
    /* 字体粗细600（半粗体） */
    margin-left: 10px;
    /* 左侧外边距10px，与文本保持间距 */
    min-width: 80px;
    /* 最小宽度80px，确保一致性 */
    text-align: center;
    /* 文本居中对齐 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画：持续0.3秒，缓动效果 */
}

/* 测试中性能指示器样式 - 性能测试进行中的状态标识 */
.performance-indicator.testing {
    background-color: #6c757d;
    /* 背景色：中性灰色 */
    color: white;
    /* 文字颜色白色 */
    animation: pulse 1.5s infinite;
    /* 脉冲动画：持续1.5秒，无限循环 */
}

/* 优秀性能指示器样式 - 延迟表现极佳的状态标识 */
.performance-indicator.excellent {
    background-color: #28a745;
    /* 背景色：绿色，表示优秀 */
    color: white;
    /* 文字颜色白色 */
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
    /* 阴影效果：绿色调阴影 */
}

/* 良好性能指示器样式 - 延迟表现良好的状态标识 */
.performance-indicator.good {
    background-color: #ffc107;
    /* 背景色：黄色，表示良好 */
    color: #212529;
    /* 文字颜色深灰色，确保对比度 */
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
    /* 阴影效果：黄色调阴影 */
}

/* 较差性能指示器样式 - 延迟表现一般但可接受的状态标识 */
.performance-indicator.poor {
    background-color: #fd7e14;
    /* 背景色：橙色，表示较差 */
    color: white;
    /* 文字颜色白色 */
    box-shadow: 0 2px 8px rgba(253, 126, 20, 0.3);
    /* 阴影效果：橙色调阴影 */
}

/* 错误性能指示器样式 - 测试失败或错误的状态标识 */
.performance-indicator.error {
    background-color: #dc3545;
    /* 背景色：红色，表示错误 */
    color: white;
    /* 文字颜色白色 */
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    /* 阴影效果：红色调阴影 */
}

/* SRI（子资源完整性）说明区域样式 - 子资源完整性安全说明的容器 */
.sri-section {
    padding: 40px 20px;
    /* 内边距：上下40px，左右20px */
    background-color: var(--card-background);
    /* 背景颜色使用卡片背景色变量 */
    border-radius: 8px;
    /* 圆角8px */
    box-shadow: 0 2px 4px var(--shadow-color);
    /* 阴影效果：使用阴影色变量 */
    margin-bottom: 40px;
    /* 底部外边距40px */
}

/* SRI区域标题样式 - 子资源完整性说明区域的主标题 */
.sri-section h3 {
    color: var(--primary-color);
    /* 颜色使用主色调变量 */
    font-size: 1.8em;
    /* 字体大小1.8em，中等标题尺寸 */
    margin-bottom: 20px;
    /* 底部外边距20px */
    text-align: center;
    /* 文本居中对齐 */
}

/* SRI区域描述文本样式 - 子资源完整性的说明文字 */
.sri-section p {
    margin-bottom: 15px;
    /* 底部外边距15px */
    text-align: center;
    /* 文本居中对齐 */
    max-width: 800px;
    /* 最大宽度800px */
    margin-left: auto;
    /* 左侧外边距自动 */
    margin-right: auto;
    /* 右侧外边距自动 */
}

/* SRI区域代码块样式 - 展示SRI哈希值的代码块 */
.sri-section pre {
    background-color: #e9ecef;
    /* 背景色：浅灰色背景 */
    padding: 15px;
    /* 内边距15px */
    border-radius: 5px;
    /* 圆角5px */
    overflow-x: auto;
    /* 水平方向溢出时显示滚动条 */
    white-space: pre-wrap;
    /* 保留空格和换行，允许自动换行 */
    word-break: break-all;
    /* 允许在任意字符间断行 */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    /* 等宽字体族 */
    font-size: 0.9em;
    /* 字体大小0.9em */
    color: #333;
    /* 文本颜色深灰色 */
    margin: 20px auto;
    /* 外边距：上下20px，左右自动（居中） */
    max-width: 90%;
    /* 最大宽度90% */
}

/* 广告区域样式 - 展示网站相关广告或推广内容 */
.ad-section {
    padding: var(--space-2xl);
    /* 内边距：使用2倍超大间距变量 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
    /* 渐变背景：白色到浅灰色渐变 */
    backdrop-filter: blur(20px);
    /* 毛玻璃模糊效果，20px模糊半径 */
    -webkit-backdrop-filter: blur(20px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-2xl);
    /* 圆角使用2倍超大圆角变量 */
    box-shadow: 
        0 20px 40px rgba(37, 99, 235, 0.08),
        /* 外部阴影：蓝色调，柔和阴影 */
        inset 0 0 40px rgba(255, 255, 255, 0.5),
        /* 内部高光：白色发光效果 */
        0 0 0 1px rgba(255, 255, 255, 0.8);
    /* 边框光效：白色边框光晕 */
    margin-bottom: var(--space-2xl);
    /* 底部外边距使用2倍超大间距变量 */
    border: none;
    /* 移除边框，避免方框效果 */
    position: relative;
    /* 相对定位，为伪元素做准备 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
}

/* 广告区域装饰伪元素 */
.ad-section::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    height: 4px;
    /* 高度4px */
    background: linear-gradient(90deg, #ff6b8b, #8b5cf6, #a855f7, #3b82f6);
    /* 水平渐变：多色渐变装饰条 */
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    /* 圆角：仅顶部有圆角 */
    box-shadow: 0 2px 15px rgba(255, 107, 139, 0.4);
    /* 阴影效果：增强视觉层次 */
}

/* 广告区域悬停效果 */
.ad-section:hover {
    transform: translateY(-5px);
    /* 悬停时上浮5px */
    box-shadow: 
        0 30px 60px rgba(37, 99, 235, 0.12),
        /* 增强外部阴影 */
        inset 0 0 50px rgba(255, 255, 255, 0.6),
        /* 增强内部高光 */
        0 0 0 2px rgba(255, 107, 139, 0.2);
    /* 增强边框光效 */
}

/* 广告区域标题样式 */
.ad-section h3 {
    color: var(--primary-color);
    /* 颜色使用主色调变量 */
    font-size: 2em;
    /* 字体大小2em，增大提升视觉层次 */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    margin-bottom: var(--space-xl);
    /* 底部外边距使用超大间距变量 */
    text-align: center;
    /* 文本居中对齐 */
    position: relative;
    /* 相对定位，为伪元素做准备 */
    letter-spacing: -0.025em;
    /* 字间距：负值使字母更紧凑 */
    font-family: var(--font-family-title);
    /* 使用标题字体变量 */
}

/* 广告区域标题下划线装饰 */
.ad-section h3::after {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    left: 50%;
    /* 左侧定位到50% */
    bottom: -10px;
    /* 底部对齐，向上偏移10px */
    transform: translateX(-50%);
    /* 水平居中：向左偏移自身宽度的50% */
    width: 80px;
    /* 宽度80px */
    height: 3px;
    /* 高度3px */
    border-radius: var(--radius-full);
    /* 完全圆角 */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    /* 背景渐变：主色到次要色 */
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
    /* 阴影效果：蓝色调 */
}

/* 广告区域描述文本样式 */
.ad-section p {
    margin-bottom: var(--space-lg);
    /* 底部外边距使用大间距变量 */
    text-align: center;
    /* 文本居中对齐 */
    max-width: 800px;
    /* 最大宽度800px */
    margin-left: auto;
    /* 左侧外边距自动 */
    margin-right: auto;
    /* 右侧外边距自动 */
    color: var(--text-secondary);
    /* 颜色使用次要文本色变量 */
    line-height: 1.7;
    /* 行高1.7倍，提高可读性 */
    font-size: 1.05em;
    /* 字体大小1.05em，稍微增大 */
}

/* 广告区域代码块样式 */
.ad-section pre {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    /* 渐变背景：浅灰色渐变 */
    padding: var(--space-lg);
    /* 内边距使用大间距变量 */
    border-radius: var(--radius-lg);
    /* 圆角使用大圆角变量 */
    overflow-x: auto;
    /* 水平方向溢出时显示滚动条 */
    white-space: pre-wrap;
    /* 保留空格和换行，允许自动换行 */
    word-break: break-word;
    /* 允许在单词边界断行，更适合长URL */
    font-family: var(--font-family-mono);
    /* 等宽字体族使用变量 */
    font-size: 0.9em;
    /* 字体大小0.9em */
    color: var(--text-primary);
    /* 文本颜色使用主要文本色变量 */
    margin: var(--space-xl) auto;
    /* 外边距：上下使用超大间距，左右自动（居中） */
    max-width: 90%;
    /* 最大宽度90% */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.06),
        /* 内部阴影：轻微内凹效果 */
        0 4px 12px rgba(37, 99, 235, 0.08);
    /* 外部阴影：蓝色调 */
    border: none;
    /* 移除边框，避免方框效果 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
}

/* 广告区域代码块悬停效果 */
.ad-section pre:hover {
    box-shadow: 
        inset 0 2px 6px rgba(0, 0, 0, 0.08),
        /* 增强内部阴影 */
        0 8px 20px rgba(37, 99, 235, 0.12);
    /* 增强外部阴影 */
    /* 移除边框颜色变化，避免方框效果 */
}


/* 广告内容区域样式 - 广告部分的主要内容容器 */
.ad {
    background: rgba(255, 255, 255, 0.85);
    /* 半透明白色背景，85%透明度 */
    backdrop-filter: blur(25px);
    /* 毛玻璃模糊效果，25px模糊半径 */
    -webkit-backdrop-filter: blur(25px);
    /* Safari浏览器兼容性 */
    border-radius: var(--radius-xl);
    /* 圆角使用超大圆角变量 */
    padding: var(--space-2xl);
    /* 内边距使用2倍超大间距变量 */
    margin-bottom: var(--space-xl);
    /* 底部外边距使用超大间距变量 */
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.1);
    /* 阴影效果：蓝色调，柔和阴影 */
    border: none;
    /* 移除边框，避免方框效果 */
    position: relative;
    /* 相对定位，为伪元素做准备 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
}

/* 广告内容区域背景渐变遮罩 */
.ad::before {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左侧对齐 */
    right: 0;
    /* 右侧对齐 */
    bottom: 0;
    /* 底部对齐 */
    background: linear-gradient(135deg, rgba(255, 107, 139, 0.05), rgba(139, 92, 246, 0.05));
    /* 135度渐变：粉红到紫色，低透明度 */
    border-radius: inherit;
    /* 继承父元素圆角 */
    pointer-events: none;
    /* 不响应鼠标事件 */
}

/* 广告内容区域悬停效果 */
.ad:hover {
    transform: translateY(-3px);
    /* 悬停时上浮3px */
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.15);
    /* 增强阴影效果 */
    /* 移除边框颜色变化，避免方框效果 */
}

/* 广告区域标题样式 - 广告部分的主要标题 */
.ad h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    /* 响应式字体大小：最小1.5rem，基于视口宽度4%，最大2rem */
    color: var(--heading-color);
    /* 颜色使用标题色变量 */
    margin-bottom: var(--space-xl);
    /* 底部外边距使用超大间距变量 */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    text-align: center;
    /* 文本居中对齐 */
    position: relative;
    /* 相对定位，为伪元素做准备 */
    font-family: var(--font-family-title);
    /* 使用标题字体变量 */
    letter-spacing: -0.025em;
    /* 字间距：负值使字母更紧凑 */
}

/* 广告标题装饰伪元素 */
.ad h2::after {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    left: 50%;
    /* 左侧定位到50% */
    bottom: -12px;
    /* 底部对齐，向上偏移12px */
    transform: translateX(-50%);
    /* 水平居中：向左偏移自身宽度的50% */
    width: 100px;
    /* 宽度100px */
    height: 3px;
    /* 高度3px */
    border-radius: var(--radius-full);
    /* 完全圆角 */
    background: linear-gradient(90deg, #ff6b8b, #8b5cf6, #a855f7);
    /* 背景渐变：粉红到紫色渐变 */
    box-shadow: 0 2px 10px rgba(255, 107, 139, 0.4);
    /* 阴影效果：粉红色调 */
}

/* 图片行容器样式 - 广告图片的水平排列容器 */
.ad-img {
    text-align: center;
    /* 文本居中对齐，使图片居中 */
    line-height: 0;
    /* 行高设为0，消除图片间的垂直空隙 */
    margin-top: var(--space-lg);
    /* 顶部外边距使用大间距变量 */
    position: relative;
    /* 相对定位，为伪元素做准备 */
    padding: var(--space-md);
    /* 内边距使用中间距变量 */

    /* 半透明白色背景，50%透明度 */
    border-radius: var(--radius-lg);
    /* 圆角使用大圆角变量 */
    border: none;
    /* 移除边框，避免方框效果 */
}

/* 广告图片链接样式 - 单个广告图片的链接容器 */
.ad-img a {
    margin: 0 var(--space-md);
    /* 左右外边距使用中间距变量，创建图片之间的间距 */
    vertical-align: middle;
    /* 垂直居中对齐，确保图片排列整齐 */
    display: inline-block;
    /* 行内块级显示 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    position: relative;
    /* 相对定位，为伪元素做准备 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    border-radius: var(--radius-lg);
    /* 圆角使用大圆角变量 */
}

/* 广告图片链接悬停效果 */
.ad-img a:hover {
    transform: translateY(-5px) scale(1.05);
    /* 上浮5px并放大5% */
    z-index: 10;
    /* 提高层级，确保在其他元素之上 */
}

/* 广告图片样式 - 广告图片的尺寸和外观设置 */
.ad-img img {
    width: 200px;
    /* 固定宽度200px，保持一致性 */
    height: 80px;
    /* 固定高度80px，保持比例 */
    object-fit: contain;
    /* 保持图片比例，完整显示在容器内 */
    border-radius: var(--radius-md);
    /* 圆角使用中间距变量 */
    transition: all var(--transition-normal);
    /* 所有属性使用正常过渡动画 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: none;
    padding: 8px;
    /* 内边距8px，创建图片与边框的间距 */
}

/* 广告图片悬停效果 */
.ad-img a:hover img {

    /* 悬停时增强阴影效果 */
    filter: brightness(1.1) saturate(1.2);
    /* 增加亮度和饱和度 */
}

/* FAQ 样式 */
.faq-section {
    background-color: var(--card-background);
    position: relative;
    overflow: hidden;
}

/* FAQ标题样式 - 常见问题解答区域标题 */
.faq-title {
    font-size: 2.5em;
    /* 字体大小2.5em */
    font-weight: 700;
    /* 字体粗细700（粗体） */
    text-align: center;
    /* 文本居中对齐 */
    margin-bottom: 50px;
    /* 底部外边距50px */
    color: var(--heading-color);
    /* 颜色使用标题色变量 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    z-index: 1;
    /* 层级设置 */
}

/* FAQ标题下划线装饰效果 */
.faq-title::after {
    content: '';
    /* 必须设置content属性 */
    position: absolute;
    /* 绝对定位 */
    left: 50%;
    /* 左侧定位到50% */
    bottom: -10px;
    /* 底部对齐，向上偏移10px */
    transform: translateX(-50%);
    /* 水平居中：向左偏移自身宽度的50% */
    width: 60px;
    /* 宽度60px */
    height: 4px;
    /* 高度4px */
    border-radius: 4px;
    /* 圆角4px */
    background: var(--primary-color);
    /* 背景颜色使用主色调变量 */
}

/* FAQ容器样式 - 常见问题解答内容容器 */
.faq-container {
    max-width: 820px;
    /* 最大宽度820px */
    margin: 0 auto;
    /* 水平居中 */
    padding: 0 24px;
    /* 水平内边距24px */
    position: relative;
    /* 相对定位 */
    z-index: 2;
    /* 层级设置 */
}

/* FAQ项目样式 - 单个常见问题项目容器 */
.faq-item {
    background: var(--background-color);
    /* 背景颜色使用背景色变量 */
    border-radius: 8px;
    /* 圆角8px */
    margin-bottom: 20px;
    /* 底部外边距20px */
    box-shadow: 0 2px 4px var(--shadow-color);
    /* 阴影效果：使用阴影色变量 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画 */
    border: 1px solid var(--border-color);
    /* 边框：1px实线，使用边框色变量 */
}

/* FAQ项目悬停效果 */
.faq-item:hover {
    transform: translateY(-3px);
    /* 上浮3px */
    box-shadow: 0 4px 8px var(--shadow-color);
    /* 增强阴影效果 */
}

/* FAQ问题样式 - 常见问题标题区域 */
.faq-question {
    padding: 20px 25px;
    /* 内边距：上下20px，左右25px */
    cursor: pointer;
    /* 鼠标指针为手型 */
    display: flex;
    /* 弹性布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中对齐 */
    font-size: 1.1em;
    /* 字体大小1.1em */
    font-weight: 600;
    /* 字体粗细600（半粗体） */
    color: var(--text-color);
    /* 颜色使用文本色变量 */
    background: white;
    /* 背景白色 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画 */
}

/* FAQ问题悬停效果 */
.faq-question:hover {
    background: var(--background-color);
    /* 背景颜色使用背景色变量 */
}

/* FAQ问题激活状态样式 */
.faq-question.active {
    background: var(--primary-color);
    /* 背景颜色使用主色调变量 */
    color: white;
    /* 文字颜色白色 */
}

/* FAQ箭头指示器样式 - 常见问题展开/收起指示图标 */
.faq-question .arrow {
    width: 0;
    /* 宽度为0，通过边框创建三角形 */
    height: 0;
    /* 高度为0，通过边框创建三角形 */
    border-left: 8px solid transparent;
    /* 左侧透明边框，形成三角形左侧 */
    border-right: 8px solid transparent;
    /* 右侧透明边框，形成三角形右侧 */
    border-top: 10px solid currentColor;
    /* 顶部边框，使用当前文字颜色 */
    transition: transform 0.4s cubic-bezier(.68, -.55, .265, 1.55);
    /* 变换过渡动画：贝塞尔曲线缓动效果 */
    margin-left: 10px;
    /* 左侧外边距10px，与文字保持间距 */
}

/* FAQ激活状态箭头样式 - 展开时箭头旋转180度 */
.faq-question.active .arrow {
    transform: rotate(180deg);
    /* 旋转180度，指向下方表示展开 */
}

/* FAQ答案区域样式 - 常见问题解答内容区域 */
.faq-answer {
    padding: 0 25px;
    /* 内边距：上下0，左右25px，初始状态无上下内边距 */
    max-height: 0;
    /* 最大高度为0，初始状态为收起 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    transition: all 0.4s ease;
    /* 所有属性过渡动画：持续0.4秒，缓动效果 */
    line-height: 1.8;
    /* 行高1.8倍，提高可读性 */
    color: var(--text-color);
    /* 颜色使用文本色变量 */
    font-size: 1em;
    /* 字体大小1em，标准字体尺寸 */
    background: white;
    /* 背景白色 */
}

/* FAQ答案激活状态样式 - 展开时显示完整内容 */
.faq-answer.active {
    max-height: 300px;
    /* 最大高度300px，允许内容展开 */
    padding: 20px 25px;
    /* 内边距：上下20px，左右25px，增加内容间距 */
}

/* FAQ答案段落样式 - 答案区域内的段落文本 */
.faq-answer p {
    margin: 0;
    /* 外边距为0，去除默认段落间距 */
}

/* JSDMirror 页脚专用样式 - 网站底部区域的自定义样式 */
.jsd-ftr {
    --jsd-ftr-bg: #ffffff;
    /* CSS变量：页脚背景色 */
    --jsd-ftr-text: #111827;
    /* CSS变量：页脚主要文本色 */
    --jsd-ftr-muted: #6b7280;
    /* CSS变量：页脚次要文本色（弱化） */
    --jsd-ftr-link: #2563eb;
    /* CSS变量：页脚链接颜色 */
    --jsd-ftr-border: #e5e7eb;
    /* CSS变量：页脚边框颜色 */
    background: var(--jsd-ftr-bg);
    /* 背景色使用页脚背景色变量 */
    color: var(--jsd-ftr-text);
    /* 文本颜色使用页脚文本色变量 */
    font-size: 14px;
    /* 字体大小14px，适合页脚阅读 */
    line-height: 1.6;
    /* 行高1.6倍，提高可读性 */
    padding: 48px 24px 0;
    /* 内边距：顶部48px，左右24px，底部0（用于底部栏） */
}

/* 页脚内部元素重置样式 - 统一页脚内所有元素的盒模型和间距 */
.jsd-ftr *,
.jsd-ftr *::before,
.jsd-ftr *::after {
    box-sizing: border-box;
    /* 盒模型设置为border-box */
    margin: 0;
    /* 外边距重置为0 */
    padding: 0;
    /* 内边距重置为0 */
}

/* 页脚内容容器样式 - 页脚主内容的布局容器 */
.jsd-ftr-wrap {
    max-width: 1280px;
    /* 最大宽度1280px，限制内容宽度 */
    margin: 0 auto;
    /* 水平居中 */
    display: flex;
    /* 弹性布局 */
    justify-content: space-between;
    /* 两端对齐，品牌区和导航区分居两侧 */
    gap: 64px;
    /* 元素之间的间距64px */
}

.jsd-ftr-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.jsd-ftr-png {
    height: 64px;
    width: auto;
}

.jsd-ftr-txt {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--jsd-ftr-text);
}

.jsd-ftr-desc {
    margin-top: 8px;
    color: var(--jsd-ftr-muted);
}

.jsd-ftr-nav {
    margin-left: auto;
    /* 紧跟品牌区右侧 */
    display: flex;
    gap: 100px;
    /* 再紧凑一点 */
    justify-content: flex-start;
    /* 栏目自身左对齐 */
    flex: 2 2 auto;
    /* 不抢剩余空间，内容决定宽度 */
    height: 200px;
    /* 增加导航区域高度 */
}

.jsd-ftr-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    /* 统一最小高度 */
    justify-content: flex-start;
    /* 内容从顶部开始排列 */
    padding-top: 10px;
    /* 顶部内边距 */
    flex: 1 1 0;
    /* 平均分配空间 */
    position: relative;
    /* 添加相对定位 */
    height: 100%;
    /* 确保填满父容器高度 */
    box-sizing: border-box;
    /* 确保盒子模型正确计算 */
}

.jsd-ftr-col strong {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 6px;
    display: block;
    position: relative;
}

.jsd-ftr-col strong::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.jsd-ftr-col a {
    color: var(--jsd-ftr-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
    padding: 4px 0;
    /* 链接上下内边距，增加间距 */
    line-height: 1.4;
    /* 行高，使链接更易读 */
    display: inline-block;
    /* 解决下划线问题 */
}

.jsd-ftr-col a:hover {
    color: var(--jsd-ftr-link);
}

/* 底部栏样式 - 网站底部版权和备案信息区域 */
.jsd-ftr-bar {
    max-width: 1280px;
    /* 最大宽度1280px */
    margin: 40px auto 0;
    /* 外边距：顶部40px，左右自动（居中），底部0 */
    padding: 24px 0;
    /* 内边距：上下24px，左右0 */
    border-top: 1px solid var(--jsd-ftr-border);
    /* 顶部边框：1px实线，使用底部边框色变量 */
    font-size: 12px;
    /* 字体大小12px */
    color: var(--jsd-ftr-muted);
    /* 文本颜色使用底部弱化色变量 */
    display: flex;
    /* 弹性布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中对齐 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 12px;
    /* 元素之间的间距12px */
}

/* 底部栏链接样式 */
.jsd-ftr-bar a {
    color: var(--jsd-ftr-link);
}

/* 链接颜色使用底部链接色变量 */

/* 技术支持标识样式 - 显示技术支持信息的容器 */
.jsd-ftr-powered {
    display: inline-flex;
    /* 行内弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    gap: 6px;
    /* 元素之间的间距6px */
}

/* 技术支持Logo样式 */
.jsd-ftr-e1logo {
    height: 16px;
    /* 高度16px */
    width: auto;
    /* 宽度自适应，保持比例 */
}

/* 备案号容器样式 - 备案号链接的布局容器 */
.jsd-ftr-icp {
    display: flex;
    /* 弹性布局 */
    gap: 16px;
    /* 元素之间的间距16px */
}

/* 备案号链接样式 */
.jsd-ftr-icp a {
    color: var(--jsd-ftr-muted);
}

/* 链接颜色使用底部弱化色变量 */

/* 备案号链接悬停效果 */
.jsd-ftr-icp a:hover {
    color: var(--jsd-ftr-link);
}

/* 悬停时颜色变为底部链接色变量 */

/* 移动端：隐藏文字logo + 减少顶部间距 */
@media(max-width:768px) {
    .jsd-ftr-txt {
        display: none;
    }

    /* 只保留图标 */
    .jsd-ftr-brand {
        margin-bottom: 8px;
    }

    /* 缩小空白 */
    .jsd-ftr-wrap {
        flex-direction: column;
        gap: 24px;
    }

    .jsd-ftr-nav {
        justify-content: space-between;
        gap: 24px;
    }

    .jsd-ftr-bar {
        flex-direction: column;
        text-align: center;
    }

    /* 移动端装饰线居中 */
    .jsd-ftr-col strong::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* 移动端：去掉 flex，让内容自然流 */
@media (max-width: 768px) {
    .jsd-ftr-wrap {
        display: block;
        /* ← 关键：取消 flex */
        text-align: center;
        /* 整体居中 */
        gap: 0;
        /* flex 间隙失效，用 margin 代替 */
    }

    /* 给导航加少量上间距，代替原来的 gap */
    .jsd-ftr-nav {
        margin-top: 16px;
    }

    /* 移动端备案号1行1个 */
    .jsd-ftr-icp {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

/* 悬浮二维码 - 页脚二维码悬浮显示效果 */
/* 基础样式（保持不变）- 二维码容器的基础布局设置 */
.jsd-ftr-qrcode {
    position: relative;
    /* 相对定位，为绝对定位的子元素提供参考 */
    color: inherit;
    /* 继承父级文本颜色 */
    text-decoration: none;
    /* 去除下划线 */
}

/* 二维码图片样式 - 悬浮二维码的具体显示效果 */
.jsd-ftr-qrcode img {
    position: absolute;
    /* 绝对定位，脱离文档流 */
    left: 15%;
    top: -150px;
    /* 水平位置15%，垂直向上偏移150px */
    transform: translateX(-50%) scale(0);
    /* 水平居中并缩放为0（隐藏） */
    width: 128px;
    height: 128px;
    /* 固定尺寸128x128像素 */
    border: 6px solid #fff;
    /* 白色边框，宽度6像素 */
    border-radius: 8px;
    /* 圆角8像素 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    /* 阴影效果：水平0，垂直8px，模糊20px，黑色15%透明度 */
    opacity: 0;
    /* 完全透明 */
    transition: .3s ease;
    /* 过渡动画：持续0.3秒，缓动效果 */
    pointer-events: none;
    /* 不响应鼠标事件 */
    z-index: 1000;
    /* 高层级，确保在其他元素之上 */
}

/* 二维码悬停显示效果 - 鼠标悬停时显示二维码 */
.jsd-ftr-qrcode:hover img {
    transform: translateX(-50%) scale(1);
    /* 水平居中并缩放为1（显示） */
    opacity: 1;
    /* 完全不透明 */
    visibility: visible;
    /* 可见状态 */
}

/* 移动端 ≤780px 只写「触发」样式 */
@media (max-width:780px) {

    /* 把 15% 改成你肉眼觉得居中的值，比如 50% 或 20px 都行 */
    .jsd-ftr-qrcode img {
        left: 50%;
        /* 或 calc(50% - 64px) 之类的精确值 */
        top: -150px;
        /* 想再高点/低点自己改 */
    }

    /* 触发状态保持不变 */
    .jsd-ftr-qrcode:active img,
    .jsd-ftr-qrcode.show img {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}


/* 返回顶部按钮 - 固定定位的页面滚动到顶部按钮 */
.scroll-to-top {
    position: fixed;
    /* 固定定位，不随页面滚动 */
    bottom: 30px;
    /* 距离底部30像素 */
    right: 30px;
    /* 距离右侧30像素 */
    background: linear-gradient(135deg, #ff6b8b, #8b5cf6, #a855f7);
    /* 135度渐变背景：粉红到紫色 */
    color: white;
    /* 文字颜色白色 */
    border-radius: 50%;
    /* 完全圆角，形成圆形按钮 */
    width: 60px;
    /* 固定宽度60像素 */
    height: 60px;
    /* 固定高度60像素 */
    display: flex;
    /* 弹性布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    font-size: 1.8em;
    /* 字体大小1.8em，相对较大 */
    text-decoration: none;
    /* 去除下划线 */
    box-shadow:
        0 6px 20px rgba(255, 107, 139, 0.5),
        /* 外部阴影：粉红色调 */
        inset 0 0 15px rgba(255, 255, 255, 0.4);
    /* 内部高光：白色发光效果 */
    transition: all 0.3s ease;
    /* 所有属性过渡动画：持续0.3秒，缓动效果 */
    opacity: 0;
    /* 初始完全透明 */
    visibility: hidden;
    /* 初始隐藏 */
    z-index: 999;
    /* 高层级，确保在其他元素之上 */
    border: 2px solid rgba(0, 0, 0, 0.1);
    /* 边框：2px实线，黑色10%透明度 */
    animation: bounce 2s ease-in-out infinite;
    /* 弹跳动画：持续2秒，无限循环 */
}

/* 弹跳动画定义 - 返回顶部按钮的呼吸效果动画 */
@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    /* 关键帧：0%、20%、50%、80%、100%时垂直位置不变 */
    40% {
        transform: translateY(-5px);
    }

    /* 关键帧：40%时向上偏移5像素 */
    60% {
        transform: translateY(-3px);
    }

    /* 关键帧：60%时向上偏移3像素 */
}

/* 显示状态样式 - 当需要显示返回顶部按钮时的样式 */
.scroll-to-top.show {
    opacity: 1;
    /* 完全不透明 */
    visibility: visible;
    /* 可见状态 */
}

/* 悬停状态效果 - 鼠标悬停时的交互反馈 */
.scroll-to-top:hover {
    background-color: #ff8cbb;
    /* 背景色变为浅粉色 */
    transform: translateY(-3px);
    /* 向上偏移3像素 */
    box-shadow: 0 6px 15px rgba(255, 105, 180, 0.6);
    /* 增强阴影效果 */
}

/* 消息提示容器 - 固定定位的提示消息容器 */
.toast-container {
    position: fixed;
    /* 固定定位，不随页面滚动 */
    bottom: 20px;
    /* 距离底部20像素 */
    right: 20px;
    /* 距离右侧20像素 */
    z-index: 1000;
    /* 最高层级，确保在其他元素之上 */
}

/* 单条消息提示样式 - 消息提示框的具体样式 */
.toast {
    background: white;
    /* 白色背景 */
    border-radius: 8px;
    /* 圆角8像素 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 阴影效果：水平0，垂直4px，模糊12px，黑色15%透明度 */
    padding: 15px 20px;
    /* 内边距：上下15px，左右20px */
    margin-bottom: 10px;
    /* 底部外边距10px，消息之间的间距 */
    display: flex;
    /* 弹性布局 */
    align-items: center;
    /* 垂直居中对齐 */
    transform: translateX(120%);
    /* 初始状态：向右偏移120%（隐藏） */
    transition: transform 0.3s ease;
    /* 变换属性过渡动画：持续0.3秒，缓动效果 */
    border-left: 4px solid #28a745;
    /* 左侧边框：4px实线，绿色（成功状态） */
    min-width: 300px;
    /* 最小宽度300px */
}

/* 显示状态样式 - 消息提示显示时的动画效果 */
.toast.show {
    transform: translateX(0);
    /* 回到原始位置（显示） */
}

/* 错误状态样式 - 错误提示消息的特殊样式 */
.toast.error {
    border-left-color: #dc3545;
    /* 左侧边框颜色变为红色（错误状态） */
}

/* 消息图标样式 - 提示消息左侧的图标 */
.toast-icon {
    margin-right: 10px;
    /* 右侧外边距10px，与文字保持间距 */
    font-size: 1.2em;
    /* 字体大小1.2em，稍大于正文 */
}

/* 消息文本样式 - 提示消息的主要内容区域 */
.toast-message {
    flex: 1;
    /* 弹性布局：占据剩余空间 */
    font-weight: 500;
    /* 字体粗细500（中等） */
}

/* 响应式设计 - 平板设备适配（最大宽度1024px） */
@media (max-width: 1024px) {

    /* 功能网格布局调整 - 在平板上显示2列 */
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        /* 网格模板：自动适应，最小280px */
        gap: var(--space-md);
        /* 网格间距使用中间距变量 */
    }

    /* 英雄区域内边距调整 - 平板设备适配 */
    .hero {
        padding: var(--space-xl) var(--space-md);
        /* 内边距：上下使用超大间距，左右使用中间距变量 */
    }
}

/* 移动端响应式设计 - 手机设备适配（最大宽度768px） */
@media (max-width: 768px) {

    /* 头部导航栏内边距调整 - 移动端紧凑布局 */
    header {
        padding: var(--space-sm) 0;
        /* 内边距：上下使用小间距，左右0 */
    }

    /* 移动端Logo字体大小调整 */
    .logo {
        font-size: 1.5rem;
        /* 字体大小调整为1.5rem */
    }

    /* 桌面端导航链接隐藏 - 移动端不显示水平导航 */
    .nav-links {
        display: none;
        /* 隐藏桌面端导航链接 */
    }

    /* 移动端菜单按钮显示 */
    .mobile-menu-btn {
        display: block;
        /* 显示移动端菜单按钮 */
    }

    /* 移动端英雄区域内边距调整 */
    .hero {
        padding: var(--space-xl) var(--space-md);
        /* 内边距：上下使用超大间距，左右使用中间距变量 */
    }

    /* 移动端英雄主标题字体响应式调整 */
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        /* 响应式字体：最小2rem，基于视口宽度8%，最大3rem */
    }

    /* 移动端英雄副标题字体响应式调整 */
    .hero h2 {
        font-size: clamp(1rem, 4vw, 1.25rem);
        /* 响应式字体：最小1rem，基于视口宽度4%，最大1.25rem */
    }

    /* 移动端英雄段落文本字体大小固定 */
    .hero p {
        font-size: 1rem;
        /* 字体大小固定为1rem */
    }

    /* 移动端功能网格调整为单列布局 */
    .features-grid {
        grid-template-columns: 1fr;
        /* 网格模板：单列布局 */
        gap: var(--space-md);
        /* 网格间距使用中间距变量 */
        padding: 0 var(--space-sm);
        /* 水平内边距使用小间距变量 */
    }

/* 移动端教程步骤卡片调整为垂直布局 */
.step-card {
    flex-direction: column;
    /* 弹性布局方向：垂直排列 */
    text-align: left;
    /* 文本左对齐，便于移动设备阅读 */
    padding: 25px 20px;
    /* 增加内边距，触摸友好 */
    gap: 15px;
    /* 增加间距，提高可读性 */
}

    /* 移动端输入组合调整为垂直布局 */
    .input-group {
        flex-direction: column;
        /* 弹性布局方向：垂直排列 */
        margin: 0 var(--space-md) var(--space-lg);
        /* 外边距：左右使用中间距，底部使用大间距 */
        max-width: none;
        /* 最大宽度无限制 */
    }

    /* 移动端输入框样式 - 移动设备上的文本输入框适配 */
    .input-group input[type="text"] {
        padding: var(--space-lg);
        /* 内边距使用大间距变量，确保触摸友好 */
        font-size: 1rem;
        /* 字体大小固定为1rem，避免缩放问题 */
    }

    /* 移动端按钮样式 - 移动设备上的按钮适配 */
    .input-group button {
        padding: var(--space-lg);
        /* 内边距使用大间距变量，增加触摸区域 */
        font-size: 1rem;
        /* 字体大小固定为1rem */
        min-width: auto;
        /* 取消最小宽度限制，适应移动端 */
    }

    /* 移动端链接项布局 - 链接项目在移动端的垂直排列 */
    .link-item {
        flex-direction: column;
        /* 弹性布局方向：垂直排列 */
        align-items: stretch;
        /* 子元素拉伸填满容器宽度 */
        gap: var(--space-xs);
        /* 间距使用超小间距变量 */
    }

    /* 移动端复制和访问按钮 - 移动设备上的按钮适配 */
    .copy-btn,
    .visit-btn {
        width: 100%;
        /* 宽度100%，填满容器 */
        justify-content: center;
        /* 内容水平居中 */
    }

    /* 移动端区块样式 - 主要内容区块在移动端的适配 */
    section {
        padding: var(--space-xl) var(--space-md);
        /* 内边距：上下使用超大间距，左右使用中间距 */
        margin-bottom: var(--space-lg);
        /* 底部外边距使用大间距变量 */
        border-radius: var(--radius-xl);
        /* 圆角使用超大圆角变量 */
    }

    /* 移动端区块标题样式 - 移动设备上的标题适配 */
    section h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
        /* 响应式字体：最小1.5rem，基于视口宽度5%，最大2rem */
        margin-bottom: var(--space-lg);
        /* 底部外边距使用大间距变量 */
    }

    /* 移动端功能卡片样式 - 功能卡片在移动端的适配 */
    .feature-card {
        padding: var(--space-lg);
        /* 内边距使用大间距变量 */
    }

    /* 移动端结果框样式 - 结果展示框在移动端的适配 */
    .result-box {
        padding: var(--space-lg);
        /* 内边距使用大间距变量 */
    }
}

/* 超小屏幕设备适配 - 最大宽度480px（手机竖屏） */
@media (max-width: 480px) {

    /* 超小屏幕容器内边距调整 */
    .container {
        padding: var(--space-sm);
        /* 内边距使用小间距变量，更紧凑的布局 */
    }

    /* 超小屏幕Logo字体大小调整 */
    .logo {
        font-size: 1.25rem;
        /* 字体大小调整为1.25rem，适应小屏幕 */
    }

    /* 超小屏幕英雄区域内边距调整 */
    .hero {
        padding: var(--space-lg) var(--space-sm);
        /* 内边距：上下使用大间距，左右使用小间距 */
    }

    /* 超小屏幕英雄主标题字体响应式调整 */
    .hero h1 {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
        /* 响应式字体：最小1.75rem，基于视口宽度10%，最大2.5rem */
    }

    /* 超小屏幕区块标题字体响应式调整 */
    section h2 {
        font-size: clamp(1.25rem, 6vw, 1.75rem);
        /* 响应式字体：最小1.25rem，基于视口宽度6%，最大1.75rem */
    }

    /* 超小屏幕功能卡片图标大小调整 */
    .feature-card .icon {
        font-size: 2.5rem;
        /* 图标大小调整为2.5rem，适应小屏幕 */
    }

    /* 超小屏幕按钮适配 */
    .btn {
        width: 100%;
        /* 宽度100%，填满容器 */
        max-width: 280px;
        /* 最大宽度280px，防止在超大屏幕上过宽 */
        margin: var(--space-sm) auto;
        /* 外边距：上下使用小间距，左右自动（居中） */
    }

    /* 超小屏幕输入组合边距调整 */
    .input-group {
        margin: 0 var(--space-sm) var(--space-lg);
        /* 外边距：左右使用小间距，底部使用大间距 */
    }

    /* 超小屏幕页脚区块内边距调整 */
    .footer-section {
        padding: var(--space-lg);
        /* 内边距使用大间距变量 */
    }

/* 超小屏幕页脚内容间距调整 */
.footer-content {
    gap: var(--space-lg);
    /* 间距使用大间距变量 */
}

/* 超小屏幕移动端菜单链接样式调整 */
.mobile-menu a {
    padding: var(--space-sm) var(--space-md);
    /* 内边距：上下使用小间距，左右使用中间距 */
    font-size: 1rem;
    /* 字体大小固定为1rem */
}

/* CDN分组移动端适配 */
@media (max-width: 768px) {
    .cdn-group {
        margin-bottom: 25px;
        /* 移动端组间间距 */
    }
    
    .cdn-group-title {
        font-size: 1em;
        /* 移动端字体大小 */
        margin-bottom: 12px;
        /* 减小底部间距 */
        padding-bottom: 6px;
        /* 减小底部内边距 */
    }
    
    .cdn-monitor {
        padding: 15px;
        /* 移动端减小内边距 */
        margin-top: 15px;
        /* 减小顶部间距 */
    }
    
    /* 移动端CDN项目触摸友好优化 */
    .cdn-item {
        padding: 15px 12px;
        /* 增加触摸区域 */
        margin-bottom: 10px;
        /* 适当增加间距 */
        border-radius: 10px;
        /* 增大圆角，触摸友好 */
    }
    
    .cdn-name {
        font-size: 1em;
        /* 移动端字体大小 */
        padding-right: 10px;
        /* 为延迟显示留出空间 */
    }
    
    .cdn-latency {
        font-size: 0.95em;
        /* 移动端延迟显示字体 */
        min-width: 70px;
        /* 最小宽度适配移动端 */
        padding: 5px 8px;
        /* 调整内边距 */
    }
    
    /* 默认CDN测试移动端适配 */
    .default-cdn-test {
        padding: 20px 15px;
        /* 移动端内边距 */
        margin-top: 20px;
        /* 减小顶部间距 */
    }
    
    .default-cdn-test h3 {
        font-size: 1.2em;
        /* 移动端标题字体 */
        margin-bottom: 12px;
        /* 减小底部间距 */
    }
    
    .default-cdn-test p {
        font-size: 0.95em;
        /* 移动端描述字体 */
        margin-bottom: 15px;
        /* 减小底部间距 */
    }
    
    .test-note {
        margin-top: 20px;
        /* 减小顶部间距 */
    }
    
    .test-note p {
        font-size: 0.85em;
        /* 备注文字大小 */
        margin: 0;
        /* 移除默认边距 */
    }
}
}

/* 协议支持信息样式 - 新增功能提示区域 */
.protocol-support-info {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%);
    border-radius: var(--radius-lg);
    border: 2px solid rgba(37, 99, 235, 0.2);
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15);
    max-width: 100%;
    overflow: hidden;
}

.protocol-support-info h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    font-size: 1.1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}

.protocol-support-info p {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 0.95em;
    line-height: 1.6;
    word-break: break-word;
}

.protocol-support-info ul {
    margin: 0;
    padding-left: 25px;
    list-style: none;
    max-width: 100%;
}

.protocol-support-info li {
    margin-bottom: 8px;
    position: relative;
    color: var(--text-primary);
    font-size: 0.9em;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

.protocol-support-info li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: #28a745;
    font-weight: bold;
}

.protocol-support-info code {
    background: rgba(37, 99, 235, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--font-family-mono);
    font-size: 0.85em;
    color: var(--primary-dark);
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* 移动端协议支持信息优化 */
@media (max-width: 768px) {
    .protocol-support-info {
        padding: 15px;
        margin-top: 15px;
        border-radius: var(--radius-md);
    }
    
    .protocol-support-info h4 {
        font-size: 1em;
        margin-bottom: 12px;
        flex-wrap: wrap;
    }
    
    .protocol-support-info p {
        font-size: 0.9em;
        margin-bottom: 10px;
        line-height: 1.5;
    }
    
    .protocol-support-info ul {
        padding-left: 20px;
    }
    
    .protocol-support-info li {
        font-size: 0.85em;
        margin-bottom: 6px;
        line-height: 1.4;
    }
    
    .protocol-support-info li::before {
        left: -18px;
    }
    
    .protocol-support-info code {
        font-size: 0.8em;
        padding: 1px 4px;
        margin: 2px 0;
        max-width: 100%;
        word-break: break-all;
        hyphens: auto;
    }
}

/* 超小屏幕协议支持信息优化 */
@media (max-width: 480px) {
    .protocol-support-info {
        padding: 12px;
        margin-top: 12px;
    }
    
    .protocol-support-info h4 {
        font-size: 0.95em;
        margin-bottom: 10px;
        gap: 6px;
    }
    
    .protocol-support-info p {
        font-size: 0.85em;
        margin-bottom: 8px;
    }
    
    .protocol-support-info ul {
        padding-left: 18px;
    }
    
    .protocol-support-info li {
        font-size: 0.8em;
        margin-bottom: 5px;
        padding-right: 5px;
    }
    
    .protocol-support-info li::before {
        left: -16px;
        font-size: 0.9em;
    }
    
    .protocol-support-info code {
        font-size: 0.75em;
        padding: 1px 3px;
        line-height: 1.3;
    }
}

/* 广告区域响应式优化 - 平板设备适配 */
@media (max-width: 1024px) {
    .ad-section {
        padding: var(--space-xl) var(--space-lg);
        /* 内边距调整 */
        margin-bottom: var(--space-xl);
        /* 底部外边距调整 */
    }
    
    .ad {
        padding: var(--space-xl);
        /* 内边距调整 */
        margin-bottom: var(--space-lg);
        /* 底部外边距调整 */
    }
    
    .ad-img a {
        margin: 0 var(--space-sm);
        /* 间距调整 */
    }
    
    .ad-img img {
        width: 180px;
        /* 图片宽度调整 */
        height: 72px;
        /* 图片高度调整 */
    }
}

/* 广告区域移动端响应式设计 */
@media (max-width: 768px) {
    .ad-section {
        padding: var(--space-lg);
        /* 内边距调整为小间距 */
        margin-bottom: var(--space-lg);
        /* 底部外边距调整为小间距 */
        border-radius: var(--radius-xl);
        /* 圆角调整 */
    }
    
    .ad-section h3 {
        font-size: 1.5em;
        /* 字体大小调整 */
        margin-bottom: var(--space-lg);
        /* 底部外边距调整 */
    }
    
    .ad-section p {
        font-size: 1em;
        /* 字体大小调整 */
        margin-bottom: var(--space-md);
        /* 底部外边距调整 */
    }
    
    .ad-section pre {
        font-size: 0.85em;
        /* 代码块字体调整 */
        padding: var(--space-md);
        /* 内边距调整 */
        margin: var(--space-lg) auto;
        /* 外边距调整 */
    }
    
    .ad {
        padding: var(--space-lg);
        /* 内边距调整 */
        margin-bottom: var(--space-md);
        /* 底部外边距调整 */
    }
    
    .ad h2 {
        font-size: 1.4em;
        /* 标题字体调整 */
        margin-bottom: var(--space-lg);
        /* 底部外边距调整 */
    }
    
    .ad-img {
        margin-top: var(--space-md);
        /* 顶部外边距调整 */
        padding: var(--space-sm);
        /* 内边距调整 */
    }
    
    .ad-img a {
        margin: 0 var(--space-xs);
        /* 间距调整为超小间距 */
        display: inline-block;
        /* 行内块级显示 */
    }
    
    .ad-img img {
        width: 150px;
        /* 移动端图片宽度 */
        height: 60px;
        /* 移动端图片高度 */
        padding: 6px;
        /* 内边距调整 */
    }
}

/* 广告区域超小屏幕适配 */
@media (max-width: 480px) {
    .ad-section {
        padding: var(--space-md);
        /* 内边距调整为中间距 */
        margin-bottom: var(--space-md);
        /* 底部外边距调整 */
    }
    
    .ad-section h3 {
        font-size: 1.3em;
        /* 字体大小进一步调整 */
        margin-bottom: var(--space-md);
        /* 底部外边距调整 */
    }
    
    .ad {
        padding: var(--space-md);
        /* 内边距调整 */
        margin-bottom: var(--space-sm);
        /* 底部外边距调整 */
    }
    
    .ad h2 {
        font-size: 1.2em;
        /* 标题字体进一步调整 */
        margin-bottom: var(--space-md);
        /* 底部外边距调整 */
    }
    
    .ad-img {
        margin-top: var(--space-sm);
        /* 顶部外边距调整为小间距 */
    }
    
    .ad-img a {
        margin: 0 8px;
        /* 间距固定为8px */
        display: block;
        /* 块级显示，垂直排列 */
        margin-bottom: var(--space-sm);
        /* 底部外边距 */
    }
    
    .ad-img img {
        width: 120px;
        /* 超小屏幕图片宽度 */
        height: 48px;
        /* 超小屏幕图片高度 */
        display: block;
        /* 块级显示 */
        margin: 0 auto;
        /* 水平居中 */
    }
    
    /* 超小屏幕广告区域代码块调整 */
    .ad-section pre {
        font-size: 0.8em;
        /* 进一步减小字体 */
        padding: var(--space-sm);
        /* 内边距调整 */
        margin: var(--space-md) auto;
        /* 外边距调整 */
        max-width: 95%;
        /* 最大宽度调整 */
    }
}