@charset "UTF-8";

.article-page { padding:40px 0 80px; background:var(--white); }

.article-container {
  max-width:860px;
  margin:0 auto;
  padding:0 20px;
}

.article-header { margin-bottom:35px; }

.article-meta {
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:15px;
  flex-wrap:wrap;
}

.article-meta .cat {
  padding:5px 14px;
  background:var(--primary-light);
  color:var(--primary-dark);
  border-radius:15px;
  font-size:0.8rem;
  font-weight:600;
}

.article-meta .date {
  font-size:0.85rem;
  color:var(--text-light);
}

.article-header h1 {
  font-size:1.8rem;
  color:var(--bg-dark);
  line-height:1.4;
  font-weight:700;
}

.article-content {
  font-size:1rem;
  line-height:1.9;
  color:var(--text-dark);
}

.article-content h2 {
  font-size:1.35rem;
  color:var(--bg-dark);
  margin:35px 0 18px;
  padding-bottom:10px;
  border-bottom:2px solid var(--primary-light);
  font-weight:700;
}

.article-content h3 {
  font-size:1.15rem;
  color:var(--bg-dark);
  margin:28px 0 14px;
  font-weight:600;
}

.article-content p {
  margin-bottom:18px;
  text-align:justify;
}

.article-content a { color:var(--primary-dark); border-bottom:1px dashed var(--primary); }
.article-content a:hover { color:var(--primary); }

.article-content ul,
.article-content ol {
  margin:15px 0;
  padding-left:28px;
}

.article-content li {
  margin-bottom:8px;
  line-height:1.8;
}

.article-content strong { color:var(--bg-dark); }

/* Tags */
.article-tags {
  margin-top:40px;
  padding-top:25px;
  border-top:1px solid var(--border);
}

.article-tags h4 {
  font-size:0.95rem;
  color:var(--bg-dark);
  margin-bottom:12px;
}

/* Related */
.related-section {
  margin-top:50px;
  padding-top:40px;
  border-top:2px solid var(--border);
}

.related-section h3 {
  font-size:1.2rem;
  color:var(--bg-dark);
  margin-bottom:25px;
  padding-left:12px;
  border-left:4px solid var(--primary);
}

.related-list { list-style:none; }

.related-list li {
  padding:12px 0;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
}

.related-list li::before {
  content:'\2022';
  color:var(--primary);
  font-weight:700;
}

.related-list a {
  color:var(--text-dark);
  font-size:0.95rem;
  transition:color 0.3s;
}

.related-list a:hover { color:var(--primary-dark); }

/* Recommend */
.recommend-section {
  margin-top:40px;
  padding:30px;
  background:var(--bg-light);
  border-radius:12px;
}

.recommend-section h3 {
  font-size:1.1rem;
  color:var(--bg-dark);
  margin-bottom:18px;
}

.recommend-grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:15px;
}

.recommend-item {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:var(--white);
  border-radius:8px;
  transition:all 0.3s;
}

.recommend-item:hover {
  box-shadow:0 4px 12px var(--shadow);
}

.recommend-item .num {
  width:32px; height:32px;
  background:var(--primary-light);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  color:var(--primary-dark);
  font-weight:700;
  flex-shrink:0;
}

.recommend-item a {
  font-size:0.9rem;
  color:var(--text-dark);
  line-height:1.4;
}

/* Prev/Next */
.article-nav {
  margin-top:50px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.article-nav a {
  padding:20px;
  background:var(--bg-light);
  border-radius:12px;
  transition:all 0.3s;
}

.article-nav a:hover {
  background:var(--primary-light);
}

.article-nav .label {
  font-size:0.8rem;
  color:var(--text-light);
  margin-bottom:5px;
}

.article-nav .title {
  font-size:0.95rem;
  color:var(--bg-dark);
  font-weight:600;
}

/* Responsive */
@media (max-width:768px) {
  .article-header h1 { font-size:1.4rem; }
  .recommend-grid { grid-template-columns:1fr; }
  .article-nav { grid-template-columns:1fr; }
}