/* 全局样式重置 */
* {
    margin: 0; /* 重置外边距 */
    padding: 0; /* 重置内边距 */
    box-sizing: border-box; /* 盒模型设置为border-box，确保元素宽度包含边框和内边距 */
}

/* 页面主体样式 */
body {
    font-family: 'Microsoft YaHei', Arial, sans-serif; /* 设置字体，优先使用微软雅黑 */
    line-height: 1.6; /* 设置行高，提高可读性 */
    color: #333; /* 设置默认文字颜色 */
    background-color: #fff; /* 设置背景颜色为白色 */
}

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

/* 头部样式 */
.header {
    background-color: #fff; /* 头部背景色为白色 */
    padding: 20px 0; /* 上下内边距20px */
    text-align: center; /* 文本居中 */
}

/* 头部容器样式 - 新的三栏布局 */
.header .container {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 三栏布局，两端对齐，中间自动分配 */
    align-items: center; /* 垂直居中对齐 */
}

/* 频道按钮区域样式 */
.channels {
    display: flex; /* 使用flex布局 */
    gap: 15px; /* 按钮间距 */
    align-items: center; /* 垂直居中对齐 */
}

/* 频道按钮样式 */
.channel-btn {
    display: inline-block;
    padding: 6px 14px;
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 2px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.channel-btn:hover {
    background-color: #f0f7ff;
    color: #0066cc;
}

/* Logo样式 */
.logo {
    flex: 1; /* 中间Logo区域占据剩余空间 */
    text-align: center;
}

/* Logo链接样式 */
.logo-link {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

.logo .site-logo {
    height: 60px; /* 增大Logo高度 */
    width: auto; /* 宽度自适应，保持图片比例 */
    display: inline-block; /* 块级元素，便于对齐 */
    margin: 0;
}

/* 登录区域样式 */
.login-area {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
}

/* 登录按钮样式 */
.login-btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #0066cc;
    color: #fff;
    border: 2px solid #0066cc;
    border-radius: 4px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.login-btn:hover {
    background-color: #0052a3;
    border-color: #0052a3;
    color: #fff;
}

/* 联系信息样式 - 保留但可能不再使用 */
.contact-info {
    display: none; /* 暂时隐藏原有的联系信息 */
    align-items: center; /* 垂直居中对齐 */
}

/* 提交信息链接样式 - 保留但可能不再使用 */
.feedback-link {
    color: #0066cc; /* 字体颜色为蓝色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 14px; /* 字体大小14px */
}

/* 主内容区样式 */
.main {
    padding: 20px 0;
}

/* 搜索区域样式 */
.search-section {
    text-align: center; /* 文本居中 */
    margin-bottom: 30px; /* 底部外边距30px */
}

/* 搜索框容器样式 */
.search-box {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    margin-bottom: 30px; /* 底部外边距30px */
    gap: 10px; /* 子元素间距10px */
}

/* 搜索输入框样式 */
#search-input {
    width: 400px; /* 宽度400px */
    height: 40px; /* 高度40px */
    padding: 0 15px; /* 左右内边距15px */
    font-size: 16px; /* 字体大小16px */
    border: 1px solid #ccc; /* 边框样式 */
    border-radius: 0; /* 圆角半径0px */
    outline: none; /* 去除默认轮廓线 */
}

/* 搜索按钮样式 */
#search-btn {
    height: 40px; /* 高度40px */
    padding: 0 20px; /* 左右内边距20px */
    font-size: 16px; /* 字体大小16px */
    background-color: #fff; /* 背景色为白色 */
    color: #000; /* 字体颜色为黑色 */
    border: 1px solid #ccc; /* 边框样式 */
    cursor: pointer; /* 鼠标指针变为手形 */
}

/* 分类导航容器样式 */
.categories-nav {
    margin: 20px 0;
    text-align: center;
}

/* 分类导航标题样式 */
.categories-nav h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    text-align: left;
}

/* 分类导航按钮容器样式 */
.category-nav-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 20px;
}

/* 分类导航按钮样式 */
.category-nav-btn {
    padding: 8px 16px;
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 分类导航按钮悬停效果 */
.category-nav-btn:hover {
    background-color: #0066cc;
    color: #fff;
}

/* 分类导航按钮激活状态 */
.category-nav-btn.active {
    background-color: #0066cc;
    color: #fff;
}

/* 分类选项样式 */
.categories {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    gap: 40px; /* 子元素间距40px */
    margin-bottom: 30px; /* 底部外边距30px */
}

/* 分类盒子样式 - 保留但可能不再使用 */
.category-box {
    width: 150px; /* 宽度150px */
    height: 100px; /* 高度100px */
    border: 1px solid #ccc; /* 边框样式 */
    padding: 15px; /* 内边距15px */
    text-align: center; /* 文本居中 */
    background-color: #fff; /* 背景色为白色 */
    transition: all 0.3s ease; /* 所有属性过渡效果 */
}

/* 分类盒子标题样式 - 保留但可能不再使用 */
.category-box h3 {
    margin: 0 0 10px 0; /* 外边距 */
    font-size: 18px; /* 字体大小18px */
    color: #000; /* 字体颜色为黑色 */
}

/* 分类盒子内容样式 - 保留但可能不再使用 */
.category-box p {
    margin: 0; /* 外边距 */
    font-size: 14px; /* 字体大小14px */
    color: #666; /* 字体颜色为灰色 */
}

/* 分类推荐区域样式 */
.recommended-section {
    margin-bottom: 40px; /* 底部外边距40px */
}

/* 推荐区域样式 */
.recommended-area {
    border: 2px solid #00cc00; /* 绿色边框 */
    padding: 20px; /* 内边距20px */
    min-height: 200px; /* 最小高度200px */
    background-color: #f9f9f9; /* 背景色为浅灰色 */
}

/* 推荐区域标题样式 */
.recommended-area h3 {
    text-align: center; /* 文本居中 */
    color: #000; /* 字体颜色为黑色 */
    margin-bottom: 20px; /* 底部外边距20px */
}

/* 波浪形页脚样式 - 使用用户提供的背景图片 */
.wave-footer {
    background-color: #0066cc;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 80px 0 40px;
    margin-top: 60px;
    background-image: url('/homepage/assets/images/background-image-02.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/* 移除原有的SVG波浪效果 */
.wave-footer::before,
.wave-footer::after {
    content: none;
}

/* 页脚容器样式 */
.footer {
    background-color: transparent; /* 背景色透明，继承波浪底部的蓝色 */
    color: #fff; /* 字体颜色为白色 */
    padding: 0;
}

/* 页脚容器样式 */
.footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* 页脚链接样式 */
.footer-links {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* 页脚链接样式 */
.footer-links a {
    color: #fff; /* 字体颜色为白色 */
    text-decoration: none; /* 去除下划线 */
    font-size: 14px;
}

/* 页脚信息样式 */
.footer-info {
    font-size: 12px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* 页脚信息段落样式 */
.footer-info p {
    margin: 5px 0;
}

/* 印范Logo样式 - 手写体 */
.footer-logo {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 30px;
    background-image: url('/homepage/assets/images/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

/* 结果区域样式 */
.results-section {
    background-color: transparent; /* 背景色透明 */
    padding: 0;
    box-shadow: none;
}

/* 结果数量样式 */
.results-count {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
    text-align: left;
}

/* 结果网格样式 */
.results-grid {
    display: block;
}

/* 文件类型选择器样式 */
.file-type-selector {
    margin: 30px 0;
    text-align: center;
}

.file-type-selector h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.file-type-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.file-type-group {
    text-align: center;
}

.file-type-group .category-box {
    width: 150px;
    height: 100px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.file-type-group .category-box:hover {
    border-color: #0066cc;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.1);
}

.file-type-group .category-box.active {
    background-color: #0066cc;
    color: #fff;
    border-color: #0066cc;
}

.file-formats {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
}



/* 标签样式 */
.tag {
    background-color: #e6f0fa;
    color: #0066cc;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
}

/* 下载量样式 */
.download-count {
    font-size: 12px;
    color: #27ae60;
    font-weight: 500;
}

/* 一键下载按钮样式 */
.one-click-download-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;
}

/* 一键下载按钮悬停效果 */
.one-click-download-btn:hover {
    background-color: #229954;
}

/* 模态框样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 模态框内容样式 */
.modal-content {
    background-color: #fff;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 800px;
    position: relative;
}

/* 关闭按钮样式 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
}

/* 关闭按钮 hover 和 focus 效果 */
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* 预览内容样式 */
#preview-content {
    margin-top: 20px;
}

/* 预览标题样式 */
.preview-title {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

/* 预览元信息样式 */
.preview-meta {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* 预览图片样式 */
.preview-image {
    width: 100%;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* ========== 只保留这一套，其他放大相关的全部删掉 ========== */
/* 1. 放大容器：只负责定位和限制最大尺寸，不额外加白边 */
.img-preview-hover {
  /* 强制居中定位 */
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  /* 最高层级，不被挡住 */
  z-index: 9999 !important;
  /* 容器只设最大限制，不设固定宽度，让图片自己撑起来 */
  max-width: 90vw !important;
  max-height: 90vh !important;
  /* 删掉多余的 padding！就是它导致的白边 */
  padding: 0 !important;
  border: none !important;
  box-shadow: 0 0 15px rgba(0,0,0,0.3) !important;
  background: transparent !important;
  display: none !important;
  pointer-events: none !important;
}

/* 2. 核心！让图片撑满容器，彻底消除白边 */
.img-preview-hover img {
  display: block !important;
  /* 强制图片放大，撑满容器 */
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  /* 限制图片的最大尺寸，避免超出屏幕 */
  max-width: 1200px !important;
  max-height: 90vh !important;
}

/* 3. 触发条件，按你实际的缩略图类名改 */
.resource-thumbnail:hover + .img-preview-hover {
  display: block !important;
}

/* 缩略图悬停效果 */
.resource-thumbnail {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.resource-thumbnail:hover {
    transform: scale(1.02);
}

/* 预览描述样式 */
.preview-description {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* 下载按钮样式 */
.download-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #27ae60;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

/* 下载按钮 hover 效果 */
.download-btn:hover {
    background-color: #229954;
}

/* 响应式样式 */
@media (max-width: 768px) {
    /* 头部容器样式 */
    .header .container {
        flex-direction: column;
        gap: 15px;
    }

    /* 搜索框容器样式 */
    .search-box {
        flex-direction: column;
        align-items: center;
    }

    /* 搜索输入框样式 */
    #search-input {
        width: 100%;
        max-width: 400px;
    }

    /* 分类选项样式 */
    .categories {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* 分类盒子样式 */
    .category-box {
        width: 100%;
        max-width: 300px;
    }

    /* 结果网格样式 */
    .results-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    /* 页脚容器样式 */
    .footer .container {
        flex-direction: column;
        text-align: center;
    }

    /* 页脚链接样式 */
    .footer-links {
        flex-direction: column;
        gap: 10px;
    }

    /* 模态框内容样式 */
    .modal-content {
        width: 95%;
        margin: 10% auto;
    }
}

/* 加载动画样式 */
.loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* 加载动画伪元素样式 */
.loading::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
}

/* 旋转动画关键帧 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 空结果样式 */
.empty-results {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

/* 搜索加载动画容器样式 */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
    min-height: 150px;
}

/* 搜索图片样式 */
.searching-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: rotate 5s linear infinite;
}

/* 旋转动画关键帧 - 5秒钟一圈 */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 推荐区域样式调整 - 增加顶部外边距，实现向下移动效果 */
.recommended-section {
    margin-top: 20px;
}

/* 排序控制样式 */
.sorting-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

/* 当前排序样式 */
.current-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-label {
    font-weight: 500;
    color: #666;
}

.sort-value {
    color: #0066cc;
    font-weight: 600;
}

/* 排序按钮容器 */
.sort-buttons {
    display: flex;
    gap: 10px;
}

/* 排序按钮样式 */
.sort-btn {
    padding: 8px 16px;
    background-color: transparent;
    color: #0066cc;
    border: 1px solid #0066cc;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sort-btn:hover {
    background-color: #0066cc;
    color: #fff;
}

/* 排序按钮激活状态 */
.sort-btn.active {
    background-color: #0066cc;
    color: #fff;
}

/* 合规提示样式 */
.compliance-notice {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
    color: #856404;
    font-size: 14px;
}

/* 侵权投诉区域样式 */
.complaint-section {
    text-align: center;
    margin-bottom: 20px;
}

/* 侵权投诉按钮样式 */
.complaint-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #dc3545;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.complaint-btn:hover {
    background-color: #c82333;
}

/* 搜索结果项样式调整 */
.result-item {
    margin-bottom: 25px;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    transition: none;
}

.result-item:hover {
    box-shadow: none;
    transform: none;
}

/* 结果内容布局 */
.result-content {
    display: flex;
    gap: 15px;
}

/* 结果缩略图样式 */
.result-thumbnail {
    width: 160px;
    height: 120px;
    flex-shrink: 0;
}

.result-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
    background-color: #f0f0f0;
}

/* 结果信息样式 */
.result-info {
    flex: 1;
}

/* 结果标题样式 */
.result-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #1a0dab;
    text-decoration: none;
}

.result-title:hover {
    text-decoration: underline;
}

/* 结果元信息样式 */
.result-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: #666;
    flex-wrap: wrap;
}

.format-options {
    margin: 8px 0;
    font-size: 13px;
}

.format-label {
    color: #666;
    margin-right: 8px;
}

.format-option {
    display: inline-block;
    padding: 2px 8px;
    margin-right: 6px;
    background-color: #f0f7ff;
    border: 1px solid #0066cc;
    border-radius: 4px;
    color: #0066cc;
    text-decoration: none;
    font-size: 11px;
    transition: all 0.3s ease;
}

.format-option:hover {
    background-color: #0066cc;
    color: white;
}

/* 结果描述样式 */
.result-description {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 8px;
}

/* 结果标签样式 */
.result-tags {
    margin-bottom: 10px;
}

/* 结果时间信息样式 */
.result-time-info {
    margin-bottom: 10px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.result-time-info .time-label {
    color: #999;
    font-weight: 500;
}

.result-time-info .time-value {
    color: #666;
    font-family: 'Courier New', monospace;
}

.result-time-info .time-value.time-invalid {
    color: #dc3545;
    text-decoration: line-through;
}

.result-time-info .time-separator {
    color: #ccc;
    margin: 0 4px;
}

.result-time-info .status-badge {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.result-time-info .status-badge.status-valid {
    background-color: #d4edda;
    color: #155724;
}

.result-time-info .status-badge.status-invalid {
    background-color: #f8d7da;
    color: #721c24;
}

.result-time-info .status-badge.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

/* 结果版权信息样式 */
.result-copyright {
    margin-bottom: 10px;
    font-size: 12px;
    color: #999;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.copyright-status,
.usage-scope,
.copyright-guide {
    display: flex;
    align-items: center;
    gap: 6px;
}

.copyright-label,
.usage-label {
    font-weight: 500;
    color: #999;
    min-width: 50px;
}

.copyright-value,
.usage-value {
    color: #666;
}

.copyright-guide {
    color: #999;
}

.complaint-link {
    color: #dc3545;
    text-decoration: none;
}

.complaint-link:hover {
    text-decoration: underline;
}

/* 结果操作区域样式 */
.result-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 下载链接样式 */
.download-link {
    display: inline-block;
    padding: 8px 16px;
    background-color: #0066cc;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.download-link:hover {
    background-color: #0052a3;
}

/* 空结果样式增强 */
.no-results-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.related-keywords,
.hot-materials {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 4px;
}

.related-keywords h4,
.hot-materials h4 {
    margin: 0 0 10px 0;
    font-size: 16px;
    color: #333;
}

/* 关键词列表样式 */
.keyword-list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.related-keyword {
    display: inline-block;
    padding: 6px 12px;
    background-color: #e6f0fa;
    color: #0066cc;
    text-decoration: none;
    border-radius: 15px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.related-keyword:hover {
    background-color: #0066cc;
    color: #fff;
}

/* 热门素材列表样式 */
.hot-materials-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.hot-material-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.hot-material-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.hot-material-info {
    padding: 10px;
}

.hot-material-title {
    display: block;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-material-type {
    display: inline-block;
    font-size: 12px;
    color: #0066cc;
    background-color: #e6f0fa;
    padding: 2px 6px;
    border-radius: 10px;
}

/* 反馈按钮样式 */
.feedback-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #27ae60;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease;
    align-self: center;
    margin-top: 10px;
}

.feedback-btn:hover {
    background-color: #229954;
}

/* 侵权投诉按钮样式 */
.complaint-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #dc3545;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.3s ease;
    margin: 10px 0;
}

.complaint-btn:hover {
    background-color: #c82333;
}

/* 投诉区域样式 */
.complaint-section {
    text-align: center;
    margin-bottom: 20px;
}

/* 搜索结果容器：初始隐藏，数据加载完再显示 */
#results-container {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease; /* 平滑显示，不闪 */
}
/* 加载完成后显示 */
#results-container.loaded {
  visibility: visible;
  opacity: 1;
}

/* 波浪分割线：固定样式，避免频繁重绘 */
.yinfan-divider {
  text-align: center;
  color: #333;
  font-size: 14px;
  letter-spacing: 2px;
  margin: 12px auto;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90%;
}

/* 资源卡片样式 */
.resource-card {
  margin-bottom: 20px;
  padding: 15px;
  border: 2px solid #00cc00;
  background-color: #f9f9f9;
  min-height: 200px;
  contain: layout;
}

/* 资源来源样式 */
.resource-source {
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}

.resource-source a {
  color: #0066cc;
  text-decoration: none;
}

.resource-source a:hover {
  text-decoration: underline;
}

/* 资源内容样式 */
.resource-content {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* 资源缩略图样式 */
.resource-thumbnail {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 150px;
}

.resource-thumbnail img {
  width: 200px;
  height: 150px;
  object-fit: contain;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  background-color: #f5f5f5;
}

/* 内容预览标签样式 */
.resource-preview-label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
  width: 100%;
}

/* 状态标签样式 */
.status-label {
  display: inline-block;
  padding: 2px 8px;
  background-color: #dc3545;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 5px;
}

/* 匹配等级标签样式 */
.match-level-label {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 5px;
  margin-right: 5px;
}

.match-level-label.exact {
  background-color: #28a745;
  color: #fff;
}

.match-level-label.close {
  background-color: #17a2b8;
  color: #fff;
}

.match-level-label.recommend {
  background-color: #ffc107;
  color: #333;
}

.match-level-label.default {
  background-color: #6c757d;
  color: #fff;
}

/* 资源信息样式 */
.resource-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* 资源标题样式 */
.resource-title {
  font-size: 24px;
  color: #000; /* 推荐区域统一黑色 */
  margin-bottom: 20px;
  font-weight: bold;
}

/* 搜索结果匹配的标题样式 */
.resource-title.match {
  color: #0066cc; /* 匹配的关键词使用蓝色 */
}

/* 搜索结果不匹配的标题样式 */
.resource-title.no-match {
  color: #ff0000; /* 不匹配的使用红色 */
}

/* 一键下载按钮样式 */
.one-click-download-btn {
  display: inline-block;
  padding: 15px 20px;
  background-color: #27ae60;
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  align-self: center;
  border: 2px solid #27ae60;
  width: auto;
  max-width: 300px;
}

.one-click-download-btn:hover {
  background-color: #229954;
  border-color: #229954;
}

/* 资源元信息样式 */
.resource-meta {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.resource-meta span {
  font-weight: bold;
}

/* 内容预览标签样式 */
.resource-preview-label {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}