:root {
   --primary: #2c7de6;
   --primary-light: #d4e6ff;
   --primary-light-bg: #d4e5ff;
   --text-color: #333;
   --text-light: #666;
   --border-color: #e4e7ed;
   --bg-gray: #f5f7fa;
   --nav-hover: #0d4a9c;
}

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

body {
   font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
   color: var(--text-color);
   background-color: #fff;
   line-height: 1.6;
}

a {
   text-decoration: none;
   color: var(--text-color);
   transition: all 0.3s;
}

a:hover {
   color: var(--primary);
}

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 15px;
}

img {
   max-width: 100%;
   height: auto;
}

.topbar-bg {
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.topbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   color: #666;
   font-size: 13px;
}

.header {
   background-color: #fff;
}

.header-container {
   display: flex;
   flex-direction: column;
   padding: 15px 0 0;
}

.header-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 15px;
}

.logo {
   height: 70px;
   display: flex;
   align-items: center;
   position: relative;
}

.logo img {
   height: 100%;
   width: auto;
}

/* SEO友好的H1隐藏方式 - 对搜索引擎可见但对用户不可见 */
.site-title {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.nav-container {
   background-color: var(--primary-light);
   border-radius: 6px;
   margin-top: 10px;
   padding: 0 8px;
}

.navbar {
   display: flex;
   list-style: none;
   width: 100%;
   padding: 0;
   margin: 0;
}

.navbar li {
   padding: 0;
   position: relative;
}

.navbar li a {
   font-weight: 500;
   font-size: 16px;
   padding: 15px 12px;
   position: relative;
   display: block;
   color: #1a68cc;
   transition: all 0.3s;
   display: flex;
   align-items: center;
}

.navbar li a .arrow-icon {
   font-size: 12px;
   margin-left: 4px;
   transition: transform 0.3s;
}

.navbar li:hover a .arrow-icon {
   transform: translateY(2px);
}

.navbar li a:hover {
   color: var(--nav-hover);
   background: rgba(255,255,255,0.2);
}

.navbar li a:after {
   content: '';
   position: absolute;
   width: 0;
   height: 3px;
   bottom: 0;
   left: 0;
   background-color: var(--nav-hover);
   transition: width 0.3s ease;
   width: 0;
}

.navbar li a:hover:after {
   width: 100%;
}

/* 网站目录下拉框单列布局 - 优化版本 */
.has-dropdown {
   position: relative;
}

.nav-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   background: #fff;
   min-width: 100px; /* 宽度设为100px */
   box-shadow: 0 8px 20px rgba(0,0,0,0.15);
   border-radius: 6px;
   padding: 5px 0;
   z-index: 1000;
   display: none;
   border: 1px solid #eaeaea;
   max-height: 450px; /* 最大高度 */
   overflow-y: auto; /* 添加滚动条 */
}

.subcategory {
   padding: 0;
   font-size: 13px; /* 调整字体大小 */
   width: 100%;
   height: 35px; /* 固定高度 */
   display: flex;
   align-items: center;
   justify-content: center;
}

.subcategory a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 0 10px;
   border-radius: 0;
   transition: all 0.2s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   background: transparent;
   border: none;
   font-size: 13px; /* 调整字体大小 */
}

.subcategory a:hover {
   color: #fff;
   background: var(--primary);
   font-weight: 500;
   border-color: transparent;
   transform: none;
}

.stats-bar {
   background-color: var(--primary-light);
   padding: 8px 0;
   margin-top: 15px;
}

.stats-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.stats-info {
   font-size: 14px;
   color: var(--text-light);
}

.stats-info strong {
   color: var(--primary);
   font-weight: bold;
   padding: 0 3px;
}

.quick-links {
   font-size: 14px;
}

.quick-links a {
   margin-left: 10px;
   color: var(--primary);
}

.search-area {
   flex: 1;
   max-width: 480px;
   margin-left: 20px;
}

.search-box {
   width: 100%;
}

.search-form {
   display: flex;
   position: relative;
   width: 100%;
}

.search-select {
   position: relative;
   background: var(--primary-light);
   border-radius: 4px 0 0 4px;
   cursor: pointer;
   padding: 0 15px;
   height: 48px;
   display: flex;
   align-items: center;
   font-size: 14px;
   min-width: 100px;
   transition: all 0.3s;
   justify-content: center; /* 确保文字居中 */
}

.search-select:hover {
   background: #d4e5ff;
}

.search-select::after {
   content: "▼";
   font-size: 10px;
   margin-left: 8px;
}

.search-select-options {
   position: absolute;
   top: 100%;
   left: 0;
   width: 100%;
   background: #fff;
   box-shadow: 0 2px 12px rgba(0,0,0,0.1);
   border-radius: 4px;
   display: none;
   z-index: 10;
}

.search-select-options a {
   display: block;
   padding: 10px 15px;
   font-size: 14px;
   text-align: center; /* 选项文字居中 */
}

.search-select-options a:hover {
   background: var(--primary-light);
}

.search-input {
   flex: 1;
   height: 48px;
   padding: 0 15px;
   border: 2px solid var(--border-color);
   border-left: none;
   border-right: none;
   outline: none;
   font-size: 16px;
   transition: all 0.3s;
}

.search-input:focus {
   border-color: var(--primary);
}

.search-button {
   height: 48px;
   padding: 0 24px;
   background: var(--primary);
   color: #fff;
   border: none;
   border-radius: 0 4px 4px 0;
   cursor: pointer;
   font-size: 16px;
   font-weight: 500;
   transition: background 0.3s;
}

.search-button:hover {
   background: #1a68cc;
}

.ad-section {
   margin: 20px auto;
   background-color: #f8f9fa;
   border-radius: 4px;
   overflow: hidden;
}

.ad-banner {
   display: block;
   width: 100%;
   height: 80px;
   background-color: #f0f0f0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
   color:  #999;
}

/* 优化后的资讯区域样式 */
.articles-section {
   margin: 20px 0;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.05);
   padding: 20px;
}

.articles-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 25px;
}

.article-column {
   display: flex;
   flex-direction: column;
}

.article-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--primary);
}

.article-title {
   font-size: 18px;
   font-weight: bold;
   color: #1a68cc;
}

.article-more {
   font-size: 14px;
   color: var(--text-light);
}

.article-more:hover {
   color: var(--primary);
}

.article-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.article-item {
   padding: 12px 0;
   border-bottom: 1px dashed #e0e0e0;
   display: flex;
   align-items: center;
}

.article-item:last-child {
   border-bottom: none;
}

.article-rank {
   width: 24px;
   height: 24px;
   background: #f0f5ff;
   border-radius: 4px;
   text-align: center;
   line-height: 24px;
   font-size: 13px;
   color: var(--primary);
   font-weight: bold;
   margin-right: 12px;
   flex-shrink: 0;
}

.article-item:nth-child(1) .article-rank {
   background: #fff1f0;
   color: #ff4d4f;
}

.article-item:nth-child(2) .article-rank {
   background: #fff7e6;
   color: #fa8c16;
}

.article-item:nth-child(3) .article-rank {
   background: #fffbe6;
   color: #faad14;
}

.article-content {
   flex: 1;
   min-width: 0;
   width: 100%; /* 确保宽度100% */
   max-width: 510px; /* 新增：限制最大宽度为510px */
}

.article-content a {
   display: block;
   color: #333;
   font-size: 15px;
   line-height: 1.5;
   transition: color 0.2s;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap; /* PC端单行显示 */
   width: 100%; /* 确保宽度100% */
}

.article-content a:hover {
   color: var(--primary);
}

/* 新增：最新收录和随机站点双栏布局 */
.dual-column-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin: 20px 0;
}

.dual-column-section {
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.05);
   padding: 20px;
}

.dual-column-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border-color);
}

.dual-column-title {
   font-size: 18px;
   font-weight: bold;
   display: flex;
   align-items: center;
}

.dual-column-more {
   font-size: 14px;
   color: var(--text-light);
}

.dual-column-more:hover {
   color: var(--primary);
}

.dual-column-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 10px;
}

.dual-column-item {
   display: block;
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 14px;
   background: var(--bg-gray);
   text-align: center;
   transition: all 0.3s;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.dual-column-item:hover {
   background: var(--primary-light);
   color: var(--primary);
   transform: translateY(-2px);
   box-shadow: 0 3px 8px rgba(44, 125, 230, 0.15);
}

/* 移动端优化 - 确保完美显示 */
@media (max-width: 991px) {
   .articles-container {
       grid-template-columns: 1fr;
       gap: 20px;
   }
   
   .article-column {
       margin-bottom: 20px;
       width: 100%;
   }
   
   .article-header {
       margin-bottom: 10px;
       padding: 0 0 8px;
   }
   
   .article-title {
       font-size: 16px;
   }
   
   .article-list {
       width: 100%;
   }
   
   .article-item {
       padding: 10px 0;
       width: 100%;
   }
   
   .article-content a {
       font-size: 15px;
       white-space: normal;
       overflow: visible;
       text-overflow: clip;
       line-height: 1.4;
   }
   
   /* 移动端双栏布局调整为单列 */
   .dual-column-layout {
       grid-template-columns: 1fr;
       gap: 15px;
   }
   
   /* 移动端保持内部两列布局 */
   .dual-column-grid {
       grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 576px) {
   .articles-section {
       padding: 15px;
   }
   
   .article-header {
       padding: 0 0 8px;
   }
   
   .article-content a {
       font-size: 14px;
   }
   
   .article-rank {
       width: 22px;
       height: 22px;
       line-height: 22px;
       font-size: 12px;
   }
   
   /* 在更小的屏幕上保持两列布局 */
   .dual-column-grid {
       grid-template-columns: 1fr 1fr;
   }
   
   .dual-column-item {
       font-size: 13px;
       padding: 6px 8px;
   }
}

.section {
   margin: 20px 0;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.05);
   padding: 20px;
}

.section-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--border-color);
}

.section-title {
   font-size: 18px;
   font-weight: bold;
   display: flex;
   align-items: center;
}

.section-title img {
   margin-right: 8px;
   width: 24px;
   height: 24px;
}

.section-more {
   font-size: 14px;
   color: var(--text-light);
}

.section-more:hover {
   color: var(--primary);
}

.hot-sites {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   list-style: none;
   padding-left: 0;
}

@media (min-width: 992px) {
   .hot-sites {
       grid-template-columns: repeat(8, 1fr);
   }
}

.site-card {
   position: relative;
   text-align: center;
}

.site-thumb {
   width: 120px;
   height: 110px;
   margin: 0 auto;
   border-radius: 6px;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f8fafc;
   border: 1px solid var(--border-color);
   transition: all 0.3s;
}

.site-card:hover .site-thumb {
   box-shadow: 0 6px 16px rgba(51,119,222,0.2);
   transform: translateY(-3px);
}

.site-thumb img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
}

.site-name {
   font-size: 14px;
   margin-top: 10px;
   display: block;
   font-weight: 500;
}

.featured-sites-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
   gap: 15px;
}

.featured-site {
   padding: 5px;
   font-size: 14px;
   text-align: center;
}

.dual-column {
   display: grid;
   gap: 20px;
}

@media (min-width: 992px) {
   .dual-column {
       grid-template-columns: 1fr 3fr;
   }
}

.cool-sites-full {
   width: 100%;
}

.category-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 5px; /* 减小标题与链接间距 */
}

.cool-category-title {
   font-size: 18px;
   font-weight: bold;
   color: var(--primary);
}

.cool-category-more {
  font-size: 14px;
   color: var(--text-light);
}

.site-links {
   display: flex;
   flex-wrap: wrap;
   margin: -5px;
}

.site-link {
   width: calc(20% - 10px);
   margin: 5px;
   padding: 8px 8px;
   text-align: center;
   background: var(--bg-gray);
   border-radius: 6px;
   transition: all 0.3s;
   font-size: 14px;
   font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.site-link:hover {
   background: var(--primary-light);
   color: var(--primary);
   transform: translateY(-3px);
   box-shadow: 0 4px 10px rgba(44,125,230,0.2);
}

/* 最新收录/点入/点出样式 */
.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 10px;
}

@media (min-width: 768px) {
   .stats-grid {
       grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
   }
}

.stats-item {
   display: block;
   padding: 8px 12px;
   border-radius: 4px;
   font-size: 14px;
   background: var(--bg-gray);
   text-align: center;
   transition: all 0.3s;
   overflow: hidden;
  text-overflow: ellipsis;
   white-space: nowrap;
}

.stats-item:hover {
   background: var(--primary-light);
   color: var(--primary);
   transform: translateY(-2px);
   box-shadow: 0 3px 8px rgba(44, 125, 230, 0.15);
}

/* 友情链接新样式 */
.friend-links-section {
   margin: 20px 0;
   background: #fff;
   border-radius: 6px;
   box-shadow: 0 2px 12px rgba(0,0,0,0.05);
   padding: 20px;
}

.friend-links-container {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
}

.friend-links-label {
   font-weight: bold;
   margin-right: 15px;
   font-size: 14px;
   color: var(--text-light);
   white-space: nowrap;
}

.friend-link {
   margin: 5px 15px 5px 0;
   font-size: 14px;
   color: var(--text-light);
   transition: all 0.3s;
   white-space: nowrap;
}

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

/* 页脚 */
.footer {
   margin-top: 40px;
   padding: 50px 0 30px;
   background: #fff;
   text-align: center;
   border-top: 1px solid var(--border-color);
   color: var(--text-light);
}

.footer-menu {
   margin-bottom: 25px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.footer-menu a {
   margin: 0 15px 10px;
   font-size: 14px;
   color: var(--text-light);
   transition: all 0.3s;
}

.footer-menu a:hover {
   color: var(--primary);
}

.footer-copyright {
   font-size: 13px;
   margin-top: 15px;
   line-height: 1.6;
}

.footer-copyright a {
   margin: 0 15px 10px;
   font-size: 13px;
   color: var(--text-light);
   transition: all 0.3s;
}

.footer-copyright a:hover {
   color: var(--primary);
}

/* 优化后的滚动按钮样式 */
.scroll-buttons {
   position: fixed;
   right: 15px;
   bottom: 30px;
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.scroll-btn {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, #2c7de6, #1a68cc);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 20px rgba(44, 125, 230, 0.4);
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 22px;
   font-weight: bold;
   border: 2px solid white;
   position: relative;
   overflow: hidden;
}

.scroll-btn:hover {
   background: linear-gradient(135deg, #1a68cc, #0d4a9c);
   transform: translateY(-3px);
   box-shadow: 0 8px极 25px rgba(44, 125, 230, 0.6);
}

.scroll-btn:active {
   transform: translateY(1px);
   box-shadow: 0 4px 15px rgba(44, 125, 230, 0.3);
}

.scroll-btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.2);
   transform: translateY(-100%);
   transition: transform 0.3s ease;
}

.scroll-btn:hover::before {
   transform: translateY(0);
}

.scroll-btn.scroll-up::after {
   content: "↑";
}

.scroll-btn.scroll-down::after {
   content: "↓";
}

/* 酷站导航分类间距优化 */
.cool-sites-box .category-sites {
   margin-bottom: 20px; /* 增加分类之间的间距 */
}

.cool-sites-box .category-sites:last-child {
   margin-bottom: 0;
}

/* 移动端调整 */
@media (max-width: 991px) {
   .topbar {
       display: none;
   }
   
   .stats-bar {
       display: none;
   }
   
   .header-top {
       flex-direction: column;
       padding: 10px 0;
   }
   
   .search-area {
       margin-left: 0;
       margin-top: 15px;
       width: 100%;
       max-width: 100%;
   }
   
   .nav-container {
       margin-top: 10px;
       padding: 0 5px !important;
   }
   
   .navbar {
       flex-wrap: wrap;
       padding: 0;
   }
   
   .navbar li {
       padding: 0;
       flex: 1 0 auto;
       text-align: center;
   }
   
   .navbar li a {
       padding: 10px 5px !important;
       font-size: 14px;
       justify-content: center;
   }
   
   /* 移动端搜索下拉优化 - 宽度调整为80px */
   .search-select {
       min-width: 80px;
       padding: 0 5px;
       font-size: 13px;
       height: 40px;
       flex-shrink: 0;
       display: flex;
       align-items: center;
       justify-content: center; /* 确保文字居中 */
   }
   
   .search-select::after {
       font-size: 8px;
       margin-left: 4px; /* 减小箭头与文字的间距 */
   }
   
   .search-input {
       border-left: 2px solid var(--border-color);
       border-right: 2px solid var(--border-color);
       height: 40px;
       font-size: 14px;
   }
   
   .search-button {
       height: 40px;
       padding: 0 15px;
       font-size: 14px;
   }
   
   /* 下拉框宽度调整为80px，与按钮一致 */
   .search-select-options {
       width: 80px;
       left: 0;
   }
   
   .search-select-options a {
       text-align: center; /* 下拉选项文字居中 */
       padding: 10px 5px; /* 调整内边距 */
       font-size: 13px; /* 字体大小调整 */
   }
   
   .hot-sites {
       grid-template-columns: repeat(4, 1fr);
       gap: 15px;
   }
   
   .stats-container {
       flex-direction: column;
       align-items: flex-start;
   }
   
   .quick-links {
       margin-top: 10px;
       display: flex;
       flex-wrap: wrap;
   }
   
   .quick-links a {
       margin: 5px 10px 5px 0;
   }
   
   /* 移动端隐藏导航下拉菜单 */
   .nav-dropdown {
       display: none !important;
   }
   
   /* 移动端隐藏箭头图标 */
   .arrow-icon {
       display: none;
   }
   
   /* 酷站导航移动端样式 - 显示4个 */
   .site-link {
       width: calc(50% - 10px);
   }
   
   .site-link:nth-child(n+5) {
       display: none;
   }
   
   /* 移动端隐藏滚动按钮 */
   .scroll-buttons {
       display: none;
   }
   
   /* 友情链接移动端样式 - 保持左对齐 */
   .friend-links-container {
       justify-content: flex-start;
   }
   
   .friend-links-label {
       margin: 5px 15px 5px 0;
   }
   
   .friend-link {
       margin: 5px 15px 5px 0;
   }
}

@media (max-width: 576px) {
   .hot-sites {
       grid-template-columns: repeat(2, 1fr);
   }
   
   .featured-sites-list {
       grid-template-columns: repeat(2, 1fr);
   }
   
   .stats-grid {
       grid-template-columns: repeat(2, 1fr);
  }
   
   .search-form {
       max-width: 100%;
   }
   
   .search-input {
       flex: 1;
       padding: 0 12px;
       font-size: 14px;
   }
   
   .search-button {
       min-width: 70px;
       padding: 0 12px;
   }
   
   .section {
       margin: 15px 0;
       padding: 15px;
   }
   
   .section-header {
       margin-bottom: 12px;
   }
   
   /* 确保酷站导航在更小屏幕上显示4个 */
   .site-link:nth-child(n+5) {
       display: none;
   }
   
   /* 友情链接小屏幕样式 - 保持左对齐 */
   .friend-links-container {
       justify-content: flex-start;
   }
   
   .friend-links-label {
       margin: 5px 15px 5px 0;
   }
   
   .friend-link {
       margin: 5px 15px 5px 0;
   }
}