/* ==========================================================================
   技术指南/文章详情 - 极致纯净版 (无边框、无背景、无阴影)
   ========================================================================== */

/* 1. 顶部封面：直接显示，不带任何装饰 */
.article-hero img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

/* 2. 核心容器：强制透明，彻底移除框感 */
.article-container {
  max-width: 800px;
  margin: 60px auto 100px;
  padding: 0 32px;
  /* 关键：强制背景消失 */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3. 文章头部：移除底部分割线，防止产生“框”的错觉 */
.article-header {
  margin-bottom: 40px;
  text-align: left;
  background: transparent !important;
  border: none !important; /* 移除底部线 */
  padding: 0 !important;   /* 移除可能的内边距 */
}

.article-tag {
  display: inline-block;
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: #12165d;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 600;
}

.article-header h1 {
  font-size: 32px;
  line-height: 1.3;
  color: #12165d;
  margin-bottom: 20px;
  border: none !important;
}

.article-intro {
  font-size: 18px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 0;
  border: none !important; /* 移除引言下的线 */
}

/* 4. 文章正文：透明背景 */
.article-content {
  color: #333;
  background: transparent !important;
}

.article-content h2 {
  font-size: 24px;
  margin: 48px 0 20px;
  color: #12165d;
}

.article-content p {
  font-size: 17px;
  line-height: 1.9;
  margin-bottom: 24px;
}

/* 5. 插图处理 */
.article-image {
  margin: 48px 0;
  text-align: center;
}

.article-image img {
  max-width: 100%;
  border-radius: 12px;
}

/* 6. 返回按钮：居中 + 语言切换按钮(lang-btn)样式 */
.article-back {
  text-align: center; 
  margin: 80px 0;
  padding-top: 40px;
  border-top: 1px solid #eee; /* 这是全页唯一的装饰线，用于区分正文与底部 */
}

.article-back a {
  display: inline-block;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  transition: all 0.25s ease;
  outline: none;
}

.article-back a:hover {
  background: #12165d !important;
  color: #fff !important;
  border-color: #12165d !important;
}

/* ==========================================================================
   暗黑模式优化
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* 确保整个容器在暗黑模式下也是完全透明的 */
  .article-container, .article-header, .article-content {
    background-color: transparent !important;
  }

  /* 标题变白 */
  .article-header h1, 
  .article-content h2 {
    color: #ffffff !important;
  }

  .article-intro { color: #aaa !important; }
  .article-content p { color: #ccc !important; }

  /* 返回按钮同步暗色 lang-btn */
  .article-back { border-color: #333 !important; }

  .article-back a {
    background: #1e1e1e !important;
    border-color: #444 !important;
    color: #ccc !important;
  }

  .article-back a:hover {
    background: #12165d !important;
    border-color: #12165d !important;
    color: #fff !important;
  }

  .article-hero img, .article-image img {
    filter: brightness(0.8);
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .article-container { margin: 20px auto; padding: 0 20px; }
  .article-header h1 { font-size: 24px; }
  .article-hero img { height: 240px; }
}

/* ===== Article Content (正文细节优化) ===== */

/* 1. 优化副标题 (h3) - 让 1. 2. 3. 这种标题更醒目 */


/* 2. 优化技术要点列表 (ul/li) - 解决“波特率”等文字不清晰的问题 */
.article-content ul {
  margin: 12px 0 24px 20px;
  list-style-type: none; /* 移除默认圆点，改用自定义更精致的符号 */
  padding: 0;
}

.article-content li {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 10px;
  position: relative;
  padding-left: 20px;
}

/* 为“波特率一致性”等列表项添加一个蓝色的小方块或圆点 */
.article-content li::before {
  content: "•";
  color: #12165d;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 18px;
}

/* 3. 强力去除任何可能导致“框感”的残留背景 */
.article-container, 
.article-header, 
.article-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ===== 暗黑模式下的文字清晰度提升 ===== */
@media (prefers-color-scheme: dark) {
  .article-content h3 {
    color: #ffffff !important;
    border-left-color: #ffffff !important;
  }
  
  .article-content li {
    color: #ccc !important;
  }
  
  .article-content li::before {
    color: #8ab4f8 !important; /* 暗色模式下点稍微亮一点 */
  }
}