@charset "UTF-8";
/* ========== 主容器 ========== */
.index-wrap {max-width: 1280px;margin: 0 auto;display: flex;gap: 20px;}
/* ========== 左侧分类栏 ========== */
.index-sidebar {width: 75px;flex-shrink: 0;margin-top: 60px;margin-bottom: 60px;}
.sidebar-list {list-style: none;margin: 0;padding: 0;position: sticky;top: 60px;}
.sidebar-link {width: 68px;height: 24px;line-height: 24px;display: block;text-align: center;font-size: 14px;color: #555;text-decoration: none;cursor: pointer;margin: 15px auto;}
.sidebar-link:hover {color: #0066FF;}
/* 第一个栏目（推荐网站）特殊样式 */
.sidebar-list li:first-child .sidebar-link {font-size: 16px;font-weight: bold;color: #0066FF;}
.sidebar-list li:first-child .sidebar-link:hover, .sidebar-list li:first-child .sidebar-link.active {color: #0066FF;}
.sidebar-list li:first-child .sidebar-link::after {content: '';display: block;width: 10px;height: 6px;background: #0066FF;clip-path: polygon(50% 0%, 100% 80%, 100% 100%, 0% 100%, 0% 80%);margin: 2px auto 0;}
.sidebar-link.active {background: #0066FF;border-radius: 4px;color: #fff;text-align: center;padding: 0;text-decoration: none;}
.sidebar-link.active:hover {color: #fff;background: #0066FF;text-decoration: none;}
/* ========== 右侧内容区 ========== */
.index-main {flex: 1;min-width: 0;margin-bottom: 28px;}
/* ========== 分类板块 ========== */
.cate-section { /*margin-bottom: 30px;*/border-radius: 8px;padding: 20px 0 32px 5px;}
.cate-section-title {font-size: 18px;font-weight: bold;color: #333;margin-bottom: 18px;display: flex;align-items: center;}
.cate-section-title i {display: inline-block;width: 28px;height: 28px;background-size: contain;background-repeat: no-repeat;background-position: center;margin-right: 8px;flex-shrink: 0;}
.ico-c0 { background-image: url(/statics/img/ico-c0.png); }
.ico-c1 { background-image: url(/statics/img/ico-c1.png); }
.ico-c2 { background-image: url(/statics/img/ico-c2.png); }
.ico-c3 { background-image: url(/statics/img/ico-c3.png); }
.ico-c4 { background-image: url(/statics/img/ico-c4.png); }
.ico-c5 { background-image: url(/statics/img/ico-c5.png); }
.ico-c6 { background-image: url(/statics/img/ico-c6.png); }
.ico-c7 { background-image: url(/statics/img/ico-c7.png); }
.ico-c8 { background-image: url(/statics/img/ico-c8.png); }
.ico-c9 { background-image: url(/statics/img/ico-c9.png); }
.ico-c10 { background-image: url(/statics/img/ico-c10.png); }
/* ========== 卡片网格 ========== */
.site-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;}
/* ========== 卡片 ========== */
.site-card {position: relative;padding: 12px;background: #fff;border-radius: 8px;border: 1px solid transparent;transition: transform 0.2s, box-shadow 0.2s, background 0.2s;}
.site-card:hover {transform: translateY(-4px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);background: #fff;border-color: #eef4ff;}
.card-main-link {display: block;text-decoration: none;color: inherit;}
.card-main-link:hover {text-decoration: none;}
/* 顶部行：logo + 标题/域名 */
.card-top {display: flex;gap: 10px;align-items: center;}
.card-logo {width: 46px;height: 46px;border-radius: 50%;flex-shrink: 0;}
.card-info {flex: 1;min-width: 0;overflow: hidden;}
.card-title {width: 200px;display: block;font-size: 16px;font-weight: bold;color: #222;}
.card-domain {width: 200px;line-height: 18px;display: block;font-size: 14px;color: #525252;margin-top: 2px;}
.site-card:hover .card-domain {color: #0066FF;text-decoration: underline;}
/* 分隔线 */
.card-line {display: block;width: 260px;height: 0;border-top: 1px solid #ECF0F3;margin: 12px auto;}
/* 描述 */
.card-desc {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;color: #6C757D;line-height: 18px;}
/* 右上角访问图标 */
.card-visit-link {position: absolute;top: 10px;right: 10px;display: none;width: 24px;height: 24px;text-decoration: none;}
.site-card:hover .card-visit-link {display: block;}
.ico-visit {display: inline-block;width: 16px;height: 16px;background-image: url("/statics/img/ico-visit.png");background-size: contain;background-repeat: no-repeat;background-position: center;}