/* 友链页面样式 */
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .doc-back {
      display: inline-block;
      margin-bottom: 20px;
      color: #8e44ad;
      text-decoration: none;
      font-size: 16px;
    }
    
    .doc-back i {
      margin-right: 5px;
    }
    
    .header-box {
      background-color: #fff;
      border-radius: 10px;
      padding: 25px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      text-align: center;
    }
    
    .main-title {
      color: #e74c3c;
      margin-bottom: 15px;
      font-size: 24px;
    }
    
    .notice-banner p {
      color: #666;
      margin: 5px 0;
      font-size: 14px;
    }
    
    .tip-box {
      background-color: #f0f7f5;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .links-stats {
      color: #666;
      margin: 0;
      font-size: 14px;
    }
    
    .links-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    
    .link-card {
      background-color: #fff;
      border-radius: 10px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .link-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .link-card-inner {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .link-image {
      height: 160px;
      overflow: hidden;
    }
    
    .link-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .link-card:hover .link-image img {
      transform: scale(1.05);
    }
    
    .link-info {
      padding: 15px;
      flex-grow: 1;
    }
    
    .link-name {
      margin: 0 0 8px 0;
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .link-desc {
      font-size: 14px;
      color: #666;
      margin: 0;
      line-height: 1.5;
    }
    
    .link-actions {
      display: flex;
      border-top: 1px solid #eee;
    }
    
    .link-btn {
      flex: 1;
      padding: 12px;
      text-align: center;
      text-decoration: none;
      color: #333;
      font-size: 14px;
      transition: background-color 0.2s ease;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .link-btn:first-child {
      border-right: 1px solid #eee;
    }
    
    .link-btn i {
      margin-right: 5px;
    }
    
    .visit-btn:hover {
      background-color: #f8f8f8;
    }
    
    .visit-btn i {
      color: #e74c3c;
    }
    
    .check-btn.status-ok i {
      color: #27ae60;
    }
    
    .check-btn.status-error i {
      color: #e74c3c;
    }
    
    /* 响应式调整 */
    @media (max-width: 768px) {
      .links-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      }
    }
    
    @media (max-width: 480px) {
      .links-container {
        grid-template-columns: 1fr;
      }
    }
    .link-back {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary);
      text-decoration: none;
      margin-bottom: 20px;
      font-weight: 500;
    }
    
    .link-back:hover {
      text-decoration: underline;
    }
    
/* 深色模式样式 - 只在真正的深色模式下应用 */
@media (prefers-color-scheme: dark) {
/* 系统级深色模式检测 */
.header-box,
.link-card,
.tip-box {
  background-color: #222;
  color: #eee;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.main-title {
  color: #ff6b6b;
}

.notice-banner p,
.links-stats,
.link-desc {
  color: #bbb;
}

.link-name {
  color: #eee;
}

.link-actions {
  border-top: 1px solid #333;
}

.link-btn {
  color: #ddd;
}

.link-btn:first-child {
  border-right: 1px solid #333;
}

.link-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.container {
  background-color: transparent;
}

.tip-box {
  background-color: #333;
}
}

/* 网站深色模式类检测 - 针对使用类名切换的网站 */
body.dark-theme .header-box,
body.dark-theme .link-card,
body.dark-theme .tip-box,
body.dark-mode .header-box,
body.dark-mode .link-card,
body.dark-mode .tip-box,
.dark .header-box,
.dark .link-card,
.dark .tip-box,
[data-theme="dark"] .header-box,
[data-theme="dark"] .link-card,
[data-theme="dark"] .tip-box {
background-color: #222;
color: #eee;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

body.dark-theme .main-title,
body.dark-mode .main-title,
.dark .main-title,
[data-theme="dark"] .main-title {
color: #ff6b6b;
}

body.dark-theme .notice-banner p,
body.dark-theme .links-stats,
body.dark-theme .link-desc,
body.dark-mode .notice-banner p,
body.dark-mode .links-stats,
body.dark-mode .link-desc,
.dark .notice-banner p,
.dark .links-stats,
.dark .link-desc,
[data-theme="dark"] .notice-banner p,
[data-theme="dark"] .links-stats,
[data-theme="dark"] .link-desc {
color: #bbb;
}

body.dark-theme .link-name,
body.dark-mode .link-name,
.dark .link-name,
[data-theme="dark"] .link-name {
color: #eee;
}

body.dark-theme .link-actions,
body.dark-mode .link-actions,
.dark .link-actions,
[data-theme="dark"] .link-actions {
border-top: 1px solid #333;
}

body.dark-theme .link-btn,
body.dark-mode .link-btn,
.dark .link-btn,
[data-theme="dark"] .link-btn {
color: #ddd;
}

body.dark-theme .link-btn:first-child,
body.dark-mode .link-btn:first-child,
.dark .link-btn:first-child,
[data-theme="dark"] .link-btn:first-child {
border-right: 1px solid #333;
}

body.dark-theme .tip-box,
body.dark-mode .tip-box,
.dark .tip-box,
[data-theme="dark"] .tip-box {
background-color: #333;
color: #ddd;
}

  /* 适配现有主题系统的按钮样式 */
  [data-theme="dark"] .link-actions {
    background-color: #222 !important;
    border-top: 1px solid #333 !important;
  }
  
  [data-theme="dark"] .link-btn {
    background-color: #333 !important;
    color: #ddd !important;
  }
  
  [data-theme="dark"] .link-btn.visit-btn {
    border-right: 1px solid #333 !important;
  }
  
  [data-theme="dark"] .link-btn:hover {
    background-color: #444 !important;
  }
  
  [data-theme="dark"] .link-btn.visit-btn i {
    color: #ff6b6b !important;
  }
  
  [data-theme="dark"] .link-btn.check-btn.status-ok i {
    color: #7fff7f !important;
  }
  
  [data-theme="dark"] .link-btn.check-btn.status-error i {
    color: #ff7f7f !important;
  }