.article-wrap { background: #f5f5f5; }
.article-container { max-width: 1350px; margin: 0 auto; }
.article-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; }
@media (max-width: 1024px) { .article-layout { grid-template-columns: 1fr; } }

.article-card { background: #fff;  box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #f0f0f0; overflow: hidden; }
.article-header { padding: 2rem 2rem 1.25rem; border-bottom: 1px solid #f8f8f8; }
.article-title { font-size: 1.75rem; font-weight: 700; color: #1a1a1a; line-height: 1.4; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1rem; font-size: 0.875rem; color: #999; }
.article-meta-item { display: flex; align-items: center; gap: 0.375rem; }
.article-digest { margin-top: 1rem; padding: 0.75rem 1rem; background: #fff7ed; 
    border-radius: 0 0.5rem 0.5rem 0; color: #666; font-size: 0.875rem; line-height: 1.7; }
.article-content { padding: 2rem; }

.article-body { font-size: 1.0625rem; line-height: 1.85; color: #374151; }
.article-body p { margin-bottom: 1.5em; }
.article-body h2 { font-size: 1.5rem; font-weight: 700; margin: 2em 0 0.75em; color: #111827; }
.article-body h3 { font-size: 1.25rem; font-weight: 600; margin: 1.75em 0 0.5em; color: #1f2937; }
.article-body h4 { font-size: 1.125rem; font-weight: 600; margin: 1.5em 0 0.5em; color: #374151; }
.article-body img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5em 0; }
.article-body blockquote { margin: 1.5em 0; padding: 1em 1.25em; border-left: 4px solid #6366f1; background: #f8fafc; border-radius: 0 0.375rem 0.375rem 0; color: #475569; }
.article-body ul, .article-body ol { margin: 1.5em 0; padding-left: 1.5em; }
.article-body li { margin-bottom: 0.5em; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.9375rem; }
.article-body th, .article-body td { border: 1px solid #e5e7eb; padding: 0.75em 1em; text-align: left; }
.article-body th { background: #f9fafb; font-weight: 600; }
.article-body code { background: #f1f5f9; padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.9em; }
.article-body pre { background: #1e293b; color: #e2e8f0; padding: 1.25em; border-radius: 0.5rem; overflow-x: auto; margin: 1.5em 0; line-height: 1.6; }
.article-body pre code { background: none; padding: 0; color: inherit; }
.article-body a { color: #6366f1; text-decoration: underline; text-underline-offset: 2px; }
.article-body a:hover { color: #4f46e5; }

.article-footer { padding: 1rem 2rem; background: #fafafa; border-top: 1px solid #f5f5f5; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.75rem; color: #999; }
@media (min-width: 640px) { .article-footer { flex-direction: row; align-items: center; justify-content: space-between; } }

.article-nav { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 640px) { .article-nav { flex-direction: row; align-items: center; justify-content: space-between; } }
.article-nav a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: #666; text-decoration: none; }
.article-nav a:hover { color: var(--color-primary, #2563eb); }

/* 面包屑（基于 ZUI 组件，仅补充间距与配色细节） */
.breadcrumb { font-size: 0.875rem; color: #888; margin: 5px 0; }
.breadcrumb a { color: #888; text-decoration: none; display: inline-flex; align-items: center; }
.breadcrumb a:hover { color: var(--color-primary, #2563eb); }
.breadcrumb a .icon { margin-right: 0.25rem; font-size: 0.875rem; }

/* 侧边栏 */
.sidebar { display: flex; flex-direction: column; gap: 1.25rem; }
.widget { background: #fff;box-shadow: 0 1px 3px rgba(0,0,0,.06); border: 1px solid #f0f0f0; overflow: hidden; }
.widget-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #f5f5f5; }
.widget-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 700; color: #333; }
.widget-title .icon { color: #f97316; }
.widget-links { display: flex; gap: 1rem; font-size: 0.875rem; }
.widget-links a { color: #999; text-decoration: none; }
.widget-links a:hover { color: var(--color-primary, #2563eb); }
.widget-body { padding: 1.25rem; }

/* 同频道测算入口样式见 sidebar-services.css（共享） */

/* 生肖配对 */
.zodiac-pair { background: linear-gradient(90deg, #ffedd5, #fffbeb);padding: 1rem; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.zodiac-select-box { text-align: center; }
.zodiac-avatar { width: 3rem; height: 3rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); margin: 0 auto 0.375rem; }
.zodiac-select-box select { font-size: 0.75rem; border: 1px solid #e5e5e5; border-radius: 0.25rem; padding: 0.25rem 0.375rem; background: #fff; }
.zodiac-heart { color: #fb923c; font-size: 1.25rem; }
.zodiac-btn { width: 100%; padding: 0.625rem; border-radius: 0.5rem; background: #f97316; color: #fff; border: none; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.zodiac-btn:hover { background: #ea580c; }
.zodiac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-top: 1rem; }
.zodiac-grid a { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; background: #fff7ed; color: #ea580c; font-size: 0.875rem; font-weight: 500; text-decoration: none; }
.zodiac-grid a:hover { background: #f97316; color: #fff; }

/* 最新文章 */
.latest-list { list-style: none; margin: 0; padding: 0; }
.latest-list li + li { border-top: 1px solid #f8f8f8; }
.latest-list a { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1.25rem; color: #444; text-decoration: none; }
.latest-list a:hover { background: #fafafa; }
.latest-list a:hover .latest-title { color: #f97316; }
.latest-tag { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; background: #f3f4f6; color: #888; font-size: 0.625rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.125rem; }
.latest-list a:hover .latest-tag { background: #f97316; color: #fff; }
.latest-title { flex: 1; font-size: 0.875rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 占位空内容 */
.empty-content { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 0; color: #d1d5db; }

/* 图标尺寸兜底 */
.w-4 { width: 1rem; }
.h-4 { height: 1rem; }
.w-3\.5 { width: 0.875rem; }
.h-3\.5 { height: 0.875rem; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.mb-4 { margin-bottom: 1rem; }