@charset "utf-8";
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI','Noto Sans SC',  sans-serif; }
        
 body { background: linear-gradient(135deg, #f0f4f8, #e0e9f5); color: #333; min-height: 100vh; line-height: 1.6; font-size: 15px; }
 
.container { max-width: 100%; margin: 0 auto; padding: 0 12px; }
        
/* 移动端顶部导航 - 紧凑版 */
header { background: linear-gradient(90deg, #006783, #2c5282); color: white; padding: 8px 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; }


.header-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.logo { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 180px; }
.logo-icon { font-size: 1.6rem; color: #4fd1c5; }
.logo-text { font-size: 1.2rem; font-weight: 700; }
.logo-text a{ color:#fff; }
.mobile-menu-btn { display: none; background: none; border: none; color: white; font-size: 1.4rem; cursor: pointer; padding: 5px; }
.register-btn { background: linear-gradient(90deg, #ff6b6b, #ff8e53); color: white; border: none; padding: 6px 12px; border-radius: 20px; font-size: 0.6rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3); }
.register-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(255, 107, 107, 0.4); }
        
/* 搜索区域 - 紧凑版 */
.search-section { padding: 15px 0 10px; text-align: center; }
.search-title { font-size: 0.8rem; color: #2d3748; margin-bottom: 10px; font-weight: 700; padding: 0 8px; }
.search-box { width: 100%; margin: 0 auto; position: relative; }
.search-input { width: 100%; padding: 12px 18px; font-size: 0.9rem; border: 1px solid #cbd5e0; border-radius: 30px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; }
.search-input:focus { outline: none; border-color: #4299e1; box-shadow: 0 3px 10px rgba(66, 153, 225, 0.15); }
.search-btn { position: absolute; right: 5px; top: 5px; background: linear-gradient(90deg, #4299e1, #3182ce); color: white; border: none; padding: 7px 15px; border-radius: 25px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.search-btn:hover { background: linear-gradient(90deg, #3182ce, #2b6cb0); }
        
/* 分类区域 - 重点优化 */
.category-section { padding: 10px 0 0; }
.section-title { font-size: 1.3rem; color: #2d3748; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 2px solid #4299e1; display: inline-block; font-weight: 700; margin-left: 5px; }
.category-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; }
.category-card { background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); overflow: hidden; transition: transform 0.3s ease; }
.category-card:hover { transform: translateY(-3px); }
.card-header { background: linear-gradient(90deg, #206f96, #3b5bdb); color: white; padding: 10px 15px; font-size: 1.05rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-header i { font-size: 0.95rem; }

/* 分类网格 - 紧凑版 */
.category-items { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 10px; }
.category-item { background: #f7fafc; padding: 8px 4px; text-align: center; border-radius: 5px; font-weight: 600; font-size: 0.8rem; border: 1px solid #e2e8f0; transition: all 0.3s ease; cursor: pointer; min-height: 40px; display: flex; align-items: center; justify-content: center; word-break: break-word; }
.category-item:hover { background: #ebf8ff; border-color: #90cdf4; color: #2b6cb0; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03); }

/* 样本详情 - 移动优化 */
.sample-detail { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); margin-bottom: 20px;}
.detail-header { background: linear-gradient(90deg, #4c6ef5, #3b5bdb); color: white; padding: 20px 15px;}
.detail-header h1{ display: flex; color: white; cursor: pointer; justify-content: center; align-items: center; gap: 5px;
           /* background: rgba(255, 255, 255, 0.2); */ padding: 6px 14px; border-radius: 20px; font-size: 1.3rem;}
.sample-title { font-size: 1.6rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3;}
.company-info { margin-top: 15px;}
.company-name { font-size: 0.8rem; font-weight: 600; margin-bottom: 8px;        }
.company-name a{ color:#ffffff;}
.company-phone { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 255, 255, 0.2); padding: 6px 14px; border-radius: 20px; font-size: 0.8rem;}
.detail-content { padding: 20px 15px;}
.detail-title { font-size: 1.2rem; color: #2d3748; margin-bottom: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px;}
.detail-desc { color: #4a5568; line-height: 1.7; margin-bottom: 20px;}
.download-btn { background: linear-gradient(90deg, #48bb78, #38a169); color: white; border: none; padding: 14px 25px; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-shadow: 0 4px 12px rgba(72, 187, 120, 0.3);}
.detail-image { margin-top: 20px; background: #f8fafc; border-radius: 8px; padding: 15px; border: 1px solid #e2e8f0; text-align: center;}
.pump-image { max-width: 100%; height: auto; max-height: 250px;}
        
 .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(45deg, #48bb78, #4299e1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
        }
        
        /* 用户信息卡片 */
        .user-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }
        
        .user-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .user-avatar-large {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(45deg, #48bb78, #4299e1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.8rem;
            color: white;
        }
        
        .user-info h2 {
            font-size: 1.4rem;
            margin-bottom: 5px;
        }
        
        .user-info p {
            color: #718096;
            font-size: 0.9rem;
        }
        
        .user-details {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }
        
        .detail-item {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .detail-label {
            color: #718096;
            font-weight: 500;
        }
        
        .detail-value {
            font-weight: 600;
            text-align: right;
        }
        
        .edit-btn {
            background: #e2e8f0;
            color: #2d3748;
            border: none;
            padding: 10px 15px;
            border-radius: 6px;
            font-weight: 600;
            margin-top: 15px;
            width: 100%;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .edit-btn:hover {
            background: #cbd5e0;
        }
        
        /* 下载样本区域 */
        .downloads-section {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
        }
        
        .section-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .downloads-list {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .download-item {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            padding: 15px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .download-item:last-child {
            border-bottom: none;
        }
        
        .download-name {
            font-weight: 700;
            font-size: 1.05rem;
        }
        
        .download-meta {
            display: flex;
            justify-content: space-between;
            color: #718096;
            font-size: 0.85rem;
        }
        
        .view-all {
            text-align: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }
        
        .view-link {
            color: #3182ce;
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 申请加入区域 */
        .membership-section {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            text-align: center;
        }
        
        .qr-container {
            margin: 20px auto;
            padding: 15px;
            background: white;
            border-radius: 12px;
            display: inline-block;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .qr-code {
            width: 180px;
            height: 180px;
            background: linear-gradient(45deg, #4c6ef5, #48bb78);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }
        
        .qr-code i {
            font-size: 4rem;
            color: white;
            opacity: 0.7;
        }
        
        .qr-text {
            margin-top: 15px;
            font-size: 0.9rem;
            color: #718096;
            max-width: 240px;
            margin: 15px auto 0;
        }
        
        .membership-btn {
            background: linear-gradient(90deg, #4c6ef5, #3b5bdb);
            color: white;
            border: none;
            padding: 14px 25px;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            margin-top: 20px;
            box-shadow: 0 4px 12px rgba(76, 110, 245, 0.3);
        }


/* 下载表格 - 移动优化 */
.download-section { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); margin-bottom: 30px;}
.download-header { background: linear-gradient(90deg, #4c6ef5, #3b5bdb); color: white; padding: 15px; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 8px;}
.table-container { overflow-x: auto; padding: 10px;}
.download-table { width: 100%; border-collapse: collapse; min-width: 500px;}
.download-table th { background: #f7fafc; padding: 12px 10px; text-align: left; font-weight: 700; color: #2d3748; border-bottom: 2px solid #e2e8f0; font-size: 0.9rem;}
.download-table td { padding: 12px 10px; border-bottom: 1px solid #e2e8f0; color: #4a5568; font-size: 0.9rem;}
.download-link { color: #3182ce; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px;}
.file-size { color: #718096; font-size: 0.85rem;}
.load-more { text-align: center; padding: 15px; background: #f8fafc;}
.load-btn { background: #e2e8f0; color: #4a5568; border: none; padding: 10px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;}
        
/* 底部导航 - 移动优化 */
.mobile-footer-nav { display: flex; justify-content: space-around; background: white; padding: 12px 0; position: fixed; bottom: 0; left: 0; right: 0; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 100;}
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; color: #4a5568; text-decoration: none;}
.nav-icon { font-size: 1.2rem;}
.nav-item.active { color: #3182ce;}
        
/* 首页样本推荐区 */
.samples-section { padding: 15px 0 25px; }
.samples-container { display: flex; flex-direction: column; gap: 12px; }
.samples-column { background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); overflow: hidden; }
.column-header { background: linear-gradient(90deg, #48bb78, #38a169); color: white; padding: 10px 15px; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.column-header i { font-size: 0.95rem; }
.sample-list { padding: 10px; }
.sample-item { padding: 10px 8px; border-bottom: 1px solid #e2e8f0; transition: all 0.3s ease; cursor: pointer; display: flex; flex-direction: column; }
.sample-item:last-child { border-bottom: none; }
.sample-item:hover { background: #f0fff4; }
.sample-title { font-weight: 700; font-size: 0.88rem; color: #2d3748; margin-bottom: 3px; }
.sample-company { font-size: 0.78rem; color: #4a5568; }
        
/* 底部 - 紧凑版 */
footer { background: #2d3748; color: white; padding: 15px 0; text-align: center; margin-top: 15px; }
.footer-content { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 8px; }
.footer-logo { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.footer-logo-icon { font-size: 1.3rem; color: #4fd1c5; }
.footer-logo-text { font-size: 1.1rem; font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0; justify-content: center; }
.footer-link { color: #cbd5e0; text-decoration: none; transition: all 0.3s ease; font-size: 0.8rem; white-space: nowrap; }
.footer-link:hover { color: white; }
.copyright { color: #a0aec0; font-size: 0.75rem; margin-top: 5px; line-height: 1.4; padding: 0 8px; }
        
/* 移动端菜单 */
.mobile-menu { display: none; background: white; border-radius: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); position: absolute; top: 55px; left: 8px; right: 8px; z-index: 99; padding: 12px; flex-direction: column; gap: 6px; }
.mobile-menu.active { display: flex; }
.mobile-menu-item { padding: 10px; border-radius: 5px; font-weight: 500; transition: all 0.3s ease; cursor: pointer; text-align: center; font-size: 0.9rem; }
.mobile-menu-item:hover { background: #f7fafc; }

 /* 响应式设计 - 平板和桌面 */
@media (min-width: 768px) { .container {     max-width: 720px;     padding: 0 15px; }  .logo {     min-width: auto; }  .category-items {     grid-template-columns: repeat(6, 1fr); }  .samples-container {     flex-direction: row;     flex-wrap: wrap; }  .samples-column {     flex: 1;     min-width: 280px; }  /* 桌面端恢复导航菜单 */ .nav-menu {     display: flex;     gap: 15px;     flex-wrap: wrap;     justify-content: center; }  .nav-item {     font-size: 0.9rem;     padding: 5px 8px; } }
        
@media (min-width: 992px) { .container {     max-width: 960px; }  .category-items {     grid-template-columns: repeat(6, 1fr); }  .samples-column {     min-width: 280px; } }
        
/* 响应式设计 - 手机 */
@media (max-width: 767px) { .mobile-menu-btn {     display: block; }  .register-btn {     margin-left: 0; }  .search-title {     font-size: 0.6rem; }  .section-title {     font-size: 1.2rem;     margin-left: 0; }  .category-items {     grid-template-columns: repeat(6, 1fr); }  .card-header {     padding: 8px 12px;     font-size: 1rem; } }
        
@media (max-width: 480px) { .logo-text {     font-size: 1.1rem; }  .search-title {     font-size: 0.6rem; }  .section-title {     font-size: 1.15rem; }  .footer-links {     gap: 8px; } }
        
@media (max-width: 360px) { .category-items {     grid-template-columns: repeat(4, 1fr); }  .logo {     min-width: auto; }  .logo-text {     font-size: 1rem; } }