/* 定义全局颜色变量 */
:root {
    --primary-color: #1890ff; /* 主色 */
    --secondary-color: #40a9ff; /* 次色 */
    --background-color: #f5f7fa; /* 背景色 */
    --card-background: #ffffff; /* 卡片背景色 */
    --text-primary: #262626; /* 主要文字颜色 */
    --text-secondary: #595959; /* 次要文字颜色 */
}

/* 设置body的默认样式 */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial; /* 字体 */
    background-color: var(--background-color); /* 背景色 */
    color: var(--text-primary); /* 文字颜色 */
    padding-bottom: 80px; /* 底部内边距 */
}

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

/* 头部样式 */
header {
    text-align: center; /* 居中对齐 */
    margin-bottom: 40px; /* 下边距 */
}

/* 工具导航样式 */
.tool-nav {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列 */
    gap: 20px; /* 间距 */
}

/* 工具卡片样式 */
.tool-card {
    padding: 20px; /* 内边距 */
    border-radius: 8px; /* 圆角 */
    background: #fff; /* 背景色 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影 */
    transition: transform 0.2s; /* 过渡效果 */
    cursor: pointer; /* 鼠标指针 */
}

/* 工具卡片悬停效果 */
.tool-card:hover {
    transform: translateY(-5px); /* 向上移动 */
}

/* 头部内容样式 */
.header-content {
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 居中 */
    padding: 16px 24px; /* 内边距 */
    text-align: center; /* 居中对齐 */
    color: var(--text-primary); /* 文字颜色 */
    position: relative; /* 相对定位 */
}

/* 头部标题样式 */
.header-content h1 {
    font-size: 2.5rem; /* 字体大小 */
    margin-bottom: 8px; /* 下边距 */
    background: linear-gradient(120deg, #1890ff, #40a9ff); /* 渐变背景 */
    -webkit-background-clip: text; /* 背景裁剪 */
    -webkit-text-fill-color: transparent; /* 文字填充透明 */
}

/* 布局样式 */
.ant-layout {
    min-height: 100vh; /* 最小高度 */
    background: var(--background-color); /* 背景色 */
    padding-top: 256px; /* 顶部内边距 */
}

/* 布局头部样式 */
.ant-layout-header {
    background: var(--card-background); /* 背景色 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 阴影 */
    padding: 0; /* 内边距 */
    height: auto; /* 高度自动 */
    position: fixed; /* 固定定位 */
    top: 0; /* 固定在顶部 */
    left: 0;
    right: 0;
    z-index: 1000; /* 层级 */
}

/* 布局内容样式 */
.ant-layout-content {
    max-width: 1200px; /* 最大宽度 */
    margin: 40px auto; /* 上下边距 */
    padding: 0 24px; /* 内边距 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 层级 */
}

/* 卡片样式 */
.ant-card {
    margin-bottom: 24px; /* 下边距 */
    transition: all 0.3s; /* 过渡效果 */
}

/* 卡片悬停效果 */
.ant-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* 阴影 */
    transform: translateY(-5px); /* 向上移动 */
}

/* 工具卡片样式 */
.tool-card.ant-card {
    border-radius: 12px; /* 圆角 */
    border: 1px solid #f0f0f0; /* 边框 */
    transition: all 0.3s ease; /* 过渡效果 */
    margin-top: 0; /* 上边距 */
}

/* 工具卡片悬停效果 */
.tool-card.ant-card:hover {
    transform: translateY(-5px); /* 向上移动 */
    box-shadow: 0 12px 24px rgba(0,0,0,0.05); /* 阴影 */
    border-color: var(--primary-color); /* 边框颜色 */
}

/* 工具卡片内容样式 */
.tool-card .ant-card-body {
    padding: 24px; /* 内边距 */
}

/* 工具卡片文字样式 */
.tool-card .ant-typography {
    margin-bottom: 16px; /* 下边距 */
}

/* 工具图标样式 */
.tool-icon {
    font-size: 32px; /* 字体大小 */
    margin-bottom: 16px; /* 下边距 */
    color: var(--primary-color); /* 颜色 */
}

/* 特性标签样式 */
.feature-tag {
    margin: 4px; /* 外边距 */
    color: var(--text-secondary); /* 文字颜色 */
    background: #f5f5f5; /* 背景色 */
    border-radius: 12px; /* 圆角 */
    padding: 4px 12px; /* 内边距 */
    font-size: 12px; /* 字体大小 */
    display: inline-block; /* 行内块 */
}

/* 主按钮样式 */
.ant-btn-primary {
    height: 40px; /* 高度 */
    border-radius: 8px; /* 圆角 */
    font-weight: 500; /* 字体粗细 */
}

/* 行间距样式 */
.gutter-row {
    margin-bottom: 24px; /* 下边距 */
}

/* 工具容器样式 */
.tool-container {
    background: #fff; /* 背景色 */
    padding: 24px; /* 内边距 */
    border-radius: 2px; /* 圆角 */
}

/* 工具头部样式 */
.tool-header {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    min-height: 64px; /* 最小高度 */
    position: relative; /* 相对定位 */
    padding: 8px 0; /* 内边距 */
}

/* 工具头部标题样式 */
.tool-header h1 {
    margin: 8px 0; /* 上下边距 */
    font-size: 2rem; /* 字体大小 */
}

/* 返回链接样式 */
.back-link {
    position: absolute; /* 绝对定位 */
    left: 24px; /* 左边距 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 垂直居中 */
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    color: var(--text-secondary); /* 文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    margin-right: 24px; /* 右边距 */
    font-size: 14px; /* 字体大小 */
}

/* 返回链接图标样式 */
.back-link i {
    margin-right: 8px; /* 右边距 */
}

/* 返回链接悬停效果 */
.back-link:hover {
    color: var(--primary-color); /* 文字颜色 */
}

/* 工具头部内容样式 */
.tool-header-content {
    flex: 1; /* 占满剩余空间 */
    text-align: center; /* 居中对齐 */
}

/* 工具头部标题样式 */
.tool-header h1.ant-typography {
    margin: 0 0 4px; /* 上下边距 */
    font-size: 1.5rem; /* 字体大小 */
    line-height: 1.4; /* 行高 */
}

/* 工具头部描述样式 */
.tool-header p.ant-typography {
    margin: 0; /* 无边距 */
    font-size: 14px; /* 字体大小 */
    opacity: 0.85; /* 透明度 */
}

/* 工具页脚样式 */
.tool-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    gap: 24px;
    z-index: 100;
}

.tool-footer a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.tool-footer a:hover {
    color: #1890ff;
}

.coffee-link svg, .home-link svg {
    transition: transform 0.3s;
}

.tool-footer a:hover svg {
    transform: scale(1.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .tool-header {
        flex-direction: column; /* 垂直布局 */
        align-items: flex-start; /* 左对齐 */
        padding: 12px 0; /* 内边距 */
    }

    .back-link {
        margin-bottom: 12px; /* 下边距 */
    }

    .tool-header-content {
        text-align: left; /* 左对齐 */
    }
}