/* ===== 基础样式重置和变量定义 ===== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

/* 页面主体样式 */
body {
    height: 100%;
    background: var(--primary-bg);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    zoom: 0.85;
}

h1, h2, h3, h4, h5, h6, .logo, .page-title, .company-item-name {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -0.02em;
}

/* ===== 头部样式 ===== */

/* 头部容器样式 */
header {
    background: var(--primary-bg);
    /* 头部背景色 */
    padding: 1rem 2rem;
    /* 内边距：上下1rem，左右2rem */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    /* 阴影效果：向下4px模糊20px */
    position: sticky;
    /* 粘性定位 */
    top: 0;
    /* 距离顶部0px */
    z-index: 100;
    /* 层级100，确保在其他元素之上 */
}

/* 头部内容容器 */
.header-container {
    max-width: 1200px;
    /* 最大宽度1200px */
    margin: 0 auto;
    /* 水平居中 */
    display: flex;
    /* flex布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中 */
}

/* Logo样式 */
.logo {
    display: flex;
    align-items: center;
}

.logo svg {
    height: 50px;
    width: auto;
}

/* 导航链接容器 */
.nav-links {
    display: flex;
    /* flex布局 */
    gap: 2rem;
    /* 子元素间距2rem */
    align-items: center;
    /* 垂直居中 */
}

/* 导航链接样式 */
.nav-link {
    color: var(--text-secondary);
    /* 文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
    font-weight: 500;
    /* 字体粗细：中等 */
    transition: all 0.3s ease;
    /* 所有属性0.3秒平滑过渡 */
    position: relative;
    /* 相对定位，用于伪元素定位 */
    padding: 0.5rem 0;
    /* 上下内边距0.5rem */
}

/* 导航链接悬停效果 */
.nav-link:hover {
    color: var(--accent);
    /* 悬停时文字变为强调色 */
}

/* 导航链接底部下划线效果 */
.nav-link::after {
    content: '';
    /* 伪元素内容为空 */
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    /* 贴底部 */
    left: 0;
    /* 贴左侧 */
    width: 0;
    /* 初始宽度为0 */
    height: 2px;
    /* 高度2px */
    background: var(--accent);
    /* 纯色下划线 */
    transition: width 0.3s ease;
    /* 宽度变化0.3秒平滑过渡 */
}

/* 悬停时下划线展开效果 */
.nav-link:hover::after {
    width: 100%;
    /* 悬停时宽度变为100% */
}

/* 头部操作按钮容器 */
.header-actions {
    display: flex;
    /* flex布局 */
    gap: 1.5rem;
    /* 子元素间距1.5rem */
    align-items: center;
    /* 垂直居中 */
}

/* 操作按钮样式 */
.action-btn {
    background: var(--card-bg);
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    /* 1px边框 */
    color: var(--text-primary);
    /* 文字颜色 */
    padding: 0.5rem 1rem;
    /* 内边距：上下0.5rem，左右1rem */
    border-radius: 8px;
    /* 圆角8px */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 0.5rem;
    /* 子元素间距0.5rem */
    font-size: 0.9rem;
    /* 字体大小 */
}

/* 操作按钮悬停效果 */
.action-btn:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg) 92%);
    transform: none;
    /* 无位移动画 */
    box-shadow: none;
}

/* 主题切换按钮样式 */
.theme-toggle {
    background: var(--accent);
    /* 纯色背景 */
    border: 1px solid color-mix(in srgb, var(--accent) 72%, #000000 28%);
    /* 精细边框 */
    width: 40px;
    /* 宽度40px */
    height: 40px;
    /* 高度40px */
    border-radius: 50%;
    /* 圆形：50%圆角 */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
}

/* 主题切换按钮悬停效果 */
.theme-toggle:hover {
    transform: rotate(8deg);
    /* 悬停时克制旋转 */
}

/* ===== 主要内容区域 ===== */

/* 主内容容器 */
main {
    flex: 1;
    /* 占据剩余空间 */
    padding: 1.5rem;
    /* 内边距1.5rem */
    background: var(--primary-bg);
    /* 次背景色 */
}

/* 主内容区域容器 */
.main-container {
    max-width: 1200px;
    /* 最大宽度1200px */
    margin: 0 auto;
    /* 水平居中 */
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

/* ===== 通用样式 ===== */

/* 加载更多按钮容器 */
.load-more-container {
    text-align: center;
    /* 文字居中 */
    margin: 1.5rem 0;
    /* 上下外边距1.5rem */
}

/* 加载更多按钮样式 */
.load-more-btn {
    background: var(--accent);
    /* 纯色背景 */
    color: white;
    /* 白色文字 */
    border: 1px solid color-mix(in srgb, var(--accent) 72%, #000000 28%);
    /* 精细边框 */
    padding: 0.8rem 2rem;
    /* 内边距：上下0.8rem，左右2rem */
    border-radius: 12px;
    font-size: 0.9rem;
    /* 字体大小 */
    font-weight: 600;
    /* 字体粗细：半粗体 */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    box-shadow: none;
}

/* 加载更多按钮悬停效果 */
.load-more-btn:hover {
    transform: none;
    /* 无位移动画 */
    filter: brightness(1.03);
    box-shadow: none;
}

/* 加载更多按钮点击效果 */
.load-more-btn:active {
    transform: none;
    /* 点击时无位移 */
}

/* 错误消息样式 */
.error-message {
    text-align: center;
    /* 文字居中 */
    padding: 2rem;
    /* 内边距2rem */
    color: var(--text-secondary);
    /* 次要文字颜色 */
    font-size: 1rem;
    /* 字体大小1rem */
    background: var(--card-bg);
    /* 卡片背景色 */
    border-radius: 10px;
    /* 圆角10px */
    border: 1px solid var(--border);
    /* 1px边框 */
    margin: 1rem 0;
    /* 上下外边距1rem */
}

/* 空状态样式 */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
    font-size: 1rem;
    background: var(--card-bg);
    border-radius: 10px;
    border: 1px dashed var(--border);
    margin: 1rem 0;
}

.empty-state i {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 1rem;
    display: block;
}

.empty-state p {
    margin: 0;
}

/* ===== 底部样式 ===== */

/* 底部容器 */
footer {
    background: var(--primary-bg);
    /* 主背景色 */
    padding: 1.5rem;
    /* 内边距1.5rem */
    border-top: 1px solid var(--border);
    /* 顶部1px边框 */
}

/* 底部内容容器 */
.footer-container {
    max-width: 1200px;
    /* 最大宽度1200px */
    margin: 0 auto;
    /* 水平居中 */
    display: flex;
    /* flex布局 */
    justify-content: space-between;
    /* 两端对齐 */
    align-items: center;
    /* 垂直居中 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 1rem;
    /* 子元素间距1rem */
}

/* 底部Logo样式 */
.footer-logo {
    font-size: 1.3rem;
    /* 字体大小1.3rem */
    font-weight: 700;
    /* 字体粗细：粗体 */
    background: none;
    /* 纯色文本 */
    color: var(--text-primary);
    -webkit-text-fill-color: currentColor;
}

/* 底部链接容器 */
.footer-links {
    display: flex;
    /* flex布局 */
    gap: 1.5rem;
    /* 子元素间距1.5rem */
}

/* 底部链接样式 */
.footer-link {
    color: var(--text-secondary);
    /* 次要文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    font-size: 0.9rem;
    /* 字体大小0.9rem */
}

/* 底部链接悬停效果 */
.footer-link:hover {
    color: var(--accent);
    /* 悬停时文字变为强调色 */
}

/* ===== 动画效果 ===== */

/* 淡入动画定义 */
@keyframes fadeIn {
    from {
        opacity: 0;
        /* 起始透明度为0 */
    }

    to {
        opacity: 1;
        /* 结束透明度为1 */
    }
}

:root {
    --primary-bg: #ffffff;
    --secondary-bg: #f7f7f8;
    --card-bg: #ffffff;
    --text-primary: #18181b;
    --text-secondary: #3f3f46;
    --accent: #0f766e;
    --accent-secondary: #0e8b72;
    --border: #e5e7eb;
}

body {
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

p, li, a, button, input, textarea, label, span {
    font-weight: 400;
}

body.light-theme {
    --primary-bg: #ffffff;
    --secondary-bg: #f7f7f8;
    --card-bg: #ffffff;
    --text-primary: #18181b;
    --text-secondary: #3f3f46;
    --accent: #0f766e;
    --accent-secondary: #0e8b72;
    --border: #e5e7eb;
}

body.dark-theme {
    --primary-bg: #09090b;
    --secondary-bg: #111114;
    --card-bg: #18181b;
    --text-primary: #f4f4f5;
    --text-secondary: #a1a1aa;
    --accent: #0f766e;
    --accent-secondary: #0e8b72;
    --border: #2a2a2e;
}

header {
    background: color-mix(in srgb, var(--primary-bg) 80%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.header-container,
.main-container,
.footer-container {
    max-width: 1280px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo svg {
    height: 40px;
    width: auto;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link::after {
    height: 2px;
    border-radius: 99px;
    background: var(--accent);
}

.header-actions {
    gap: 0.75rem;
}

.action-btn {
    min-height: 40px;
    border-radius: 10px;
    border-color: color-mix(in srgb, var(--border) 88%, transparent);
    background: var(--card-bg);
    color: var(--text-primary);
    font-weight: 500;
}

.action-btn:hover {
    transform: none;
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg) 92%);
    box-shadow: none;
}

.theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    color: var(--text-primary);
}

.theme-toggle:hover {
    transform: rotate(8deg);
    background: color-mix(in srgb, var(--accent) 12%, var(--card-bg) 88%);
}

main {
    padding: 1.25rem;
    background: var(--primary-bg);
}

.load-more-btn {
    border-radius: 12px;
    background: var(--accent);
    color: #f8fafc;
    box-shadow: none;
    border: 1px solid color-mix(in srgb, var(--accent) 75%, #000000 25%);
    font-weight: 600;
}

.load-more-btn:hover {
    transform: none;
    filter: brightness(1.03);
    box-shadow: none;
}

.load-more-btn:active {
    transform: none;
}

footer {
    background: color-mix(in srgb, var(--primary-bg) 90%, transparent);
}

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

.footer-link:hover {
    color: var(--text-primary);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, #ffffff 30%);
    outline-offset: 2px;
}