/* articles.css - 文章列表+文章详情页专属样式 */

/* 文章列表页布局 */
.article-layout{display:grid;grid-template-columns:1fr 280px;gap:24px;align-items:start}
.article-main{min-width:0}
.article-sidebar{position:sticky;top:68px}
.sidebar-box{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;margin-bottom:16px}
.sidebar-title{font-size:15px;font-weight:700;color:#1a1a2e;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #f1f5f9}
.sidebar-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;font-size:13px;color:#374151;text-decoration:none;transition:.15s}
.sidebar-item:hover{background:var(--primary-lighter,#f5f3ff);color:var(--primary,#8b5cf6)}
.sidebar-num{width:20px;height:20px;border-radius:4px;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-num.hot{background:linear-gradient(135deg,var(--primary,#8b5cf6),#a855f7);color:#fff}
.sidebar-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-count{font-size:12px;color:#9ca3af;flex-shrink:0}

/* 文章网格 */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.art-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;transition:.2s;display:block}
.art-card:hover{border-color:var(--primary-light,#c7d2fe);box-shadow:0 4px 12px rgba(var(--primary-rgb,139,92,246),.06)}
.art-card img{width:100%;height:120px;object-fit:cover}
.art-card-bd{padding:12px}
.art-card-bd h3{font-size:13px;font-weight:600;margin-bottom:4px}
.art-card-bd p{font-size:11px;color:#64748b;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-card .meta{padding:0 12px 10px;font-size:10px;color:#94a3b8}

/* 文章详情页 */
.article-detail-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.article-detail-cover{width:100%;max-height:400px;object-fit:cover;display:block}
.article-detail-body{padding:32px 36px}
.article-detail-title{font-size:24px;font-weight:700;color:#1a1a2e;line-height:1.4;margin-bottom:16px}
.article-detail-meta{display:flex;gap:16px;font-size:13px;color:#94a3b8;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #f1f5f9}
.article-detail-content{font-size:15px;line-height:1.8;color:#374151}
.article-detail-content h1,.article-detail-content h2,.article-detail-content h3{margin:20px 0 12px;color:#1a1a2e}
.article-detail-content h2{font-size:20px;padding-bottom:8px;border-bottom:1px solid #f1f5f9}
.article-detail-content p{margin-bottom:12px}
.article-detail-content code{background:var(--primary-lighter,#f5f3ff);color:#7c3aed;padding:2px 6px;border-radius:4px;font-size:13px}
.article-detail-content pre{background:#1e293b;color:#e2e8f0;padding:16px;border-radius:10px;overflow-x:auto;margin:16px 0;font-size:13px;line-height:1.6}
.article-detail-content pre code{background:none;color:inherit;padding:0}
.article-detail-content img{max-width:100%;border-radius:8px;margin:12px 0}
.article-detail-content blockquote{border-left:3px solid var(--primary,#8b5cf6);padding:12px 16px;background:var(--primary-lighter,#f5f3ff);border-radius:0 8px 8px 0;margin:16px 0;color:#4b5563}
.article-detail-content ul,.article-detail-content ol{padding-left:20px;margin:12px 0}
.article-detail-content li{margin-bottom:6px}
.article-detail-content table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.article-detail-content th,.article-detail-content td{border:1px solid #e5e7eb;padding:8px 12px;text-align:left}
.article-detail-content th{background:#f9fafb;font-weight:600}
.article-detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid #f1f5f9}
.article-tag{font-size:12px;padding:4px 12px;background:var(--primary-lighter,#f5f3ff);color:var(--primary,#8b5cf6);border-radius:16px;text-decoration:none;transition:.15s}
.article-tag:hover{background:var(--primary,#8b5cf6);color:#fff}
.article-detail-actions{margin-top:24px;padding-top:16px;border-top:1px solid #f1f5f9}
.btn-back{padding:8px 20px;background:#f3f4f6;color:#374151;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;cursor:pointer;transition:.15s}
.btn-back:hover{background:#e5e7eb}

/* 文章正文 */
.article-content{font-size:14px;color:#334155;line-height:1.8}
.article-content h2{font-size:17px;font-weight:700;margin:20px 0 10px}
.article-content p{margin-bottom:10px}
.article-content a{color:var(--primary,#8b5cf6)}
.article-content ul,.article-content ol{margin:10px 0;padding-left:22px}
.article-content pre{background:#f1f5f9;padding:14px;border-radius:8px;overflow-x:auto;font-size:12px}
.article-content code{background:#f1f5f9;padding:2px 5px;border-radius:3px;font-size:12px}

/* 暗色模式 */

/* 移动端 */
@media(max-width:768px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{display:none!important}
  .art-grid{grid-template-columns:1fr}
  .article-detail-body{padding:20px 16px}
  .article-detail-title{font-size:20px}
  .article-detail-meta{flex-wrap:wrap;gap:8px}
}

/* 暗色模式 - 文章页 */