/* 公共文章阅读器；结构与 App 由共享 article-renderer.js 生成。 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body.public-article { margin: 0; background: var(--ui-page-bg, #101218); color: var(--ui-text-primary, #e0d8c8); font-family: -apple-system, BlinkMacSystemFont, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; line-height: 1.8; -webkit-font-smoothing: antialiased; }
body.public-article a { color: var(--ui-accent, #c9a960); text-decoration: none; }
.public-article .content-wrap { width: min(var(--layout-shell-width), 100%); max-width: var(--layout-shell-width); margin: var(--layout-nav-height) auto 0; padding: 0 var(--layout-shell-gutter) var(--layout-page-padding-bottom); }
.public-article .article-detail,
.public-article .lock-wrap,
.public-article .article-footer,
.public-article .related-articles {
  width: min(var(--layout-reading-width), 100%);
  max-width: var(--layout-reading-width);
  margin-left: auto;
  margin-right: auto;
}
.public-article .article-detail { padding: 0 0 16px; }
.public-article .article-detail-header { padding: 20px 0; }
.public-article .article-detail-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.public-article .article-detail-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.public-article .tag { display: inline-flex; padding: 3px 8px; border: 1px solid var(--ui-border, rgba(201,169,96,.16)); border-radius: 999px; color: #9f8754; font-size: 12px; }
.public-article .article-detail h2 { color: var(--ui-text-primary, #e8e0d0); font-size: 20px; font-weight: 500; line-height: 1.6; }
.public-article .article-detail-summary { margin-top: 9px; color: var(--ui-text-secondary, #9a9080); font-size: 14px; line-height: 1.75; }
.public-article .article-unit-intent { display: grid; gap: 5px; margin-top: 16px; padding: 13px 14px; border-left: 2px solid var(--ui-accent, #c9a960); background: rgba(201,169,96,.045); }
.public-article .article-unit-intent small { color: var(--ui-accent, #c9a960); font-size: 12px; letter-spacing: .08em; }
.public-article .article-unit-intent strong { color: var(--ui-text-primary, #e0d8c8); font-size: 15px; font-weight: 500; line-height: 1.55; }
.public-article .article-unit-intent span { color: var(--ui-text-secondary, #9a9080); font-size: 13px; line-height: 1.6; }
.public-article .article-modules { display: grid; gap: 8px; }
.public-article .article-module-slot { min-width: 0; }
.public-article .module-text { padding: 12px 0; }
.public-article .module-kicker { margin-bottom: 5px; color: var(--ui-accent, #c9a960); font-size: 12px; letter-spacing: .08em; }
.public-article .module-text h4 { margin: 0 0 10px; color: var(--ui-text-primary, #e0d8c8); font-size: 16px; font-weight: 600; line-height: 1.6; }
.public-article .module-content { color: var(--ui-text-secondary, #aaa29a); font-size: 15px; line-height: 1.9; }
.public-article .module-content p { margin: 0 0 10px; }
.public-article .module-content ul, .public-article .module-content ol { margin: 8px 0; padding-left: var(--layout-list-indent); }
.public-article .module-content strong { color: var(--ui-text-primary, #e0d8c8); font-weight: 600; }
.public-article .practice-card-component { margin: 12px 0; padding: 16px; border: 1px solid var(--ui-border, rgba(201,169,96,.16)); border-radius: 12px; background: var(--ui-surface, rgba(24,27,36,.92)); }
.public-article .pcard-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.public-article .pcard-title { color: var(--ui-text-primary, #e0d8c8); font-size: 15px; font-weight: 600; }
.public-article .pcard-model-label { color: var(--ui-accent, #c9a960); font-size: 13px; }
.public-article .public-activity-preview p { margin-top: 9px; color: var(--ui-text-secondary, #9a9080); font-size: 13px; line-height: 1.7; }
.public-article .public-activity-preview small { display: block; margin-top: 10px; color: var(--ui-text-tertiary, #77727d); font-size: 11px; line-height: 1.6; }
.public-article .module-image { margin: 12px 0; overflow: hidden; border-radius: 12px; }
.public-article .module-image img { display: block; width: 100%; }
.public-article .module-caption { margin-top: 6px; color: var(--ui-text-tertiary, #77727d); font-size: 12px; text-align: center; }
.public-article .video-wrap { margin: 16px 0; text-align: center; }
.public-article .video-wrap video { width: 100%; max-width: 640px; border-radius: 12px; background: #000; }
.public-article .audio-wrap { margin: 16px 0; }
.public-article audio { width: 100%; }
.public-article .article-footer { margin-top: 52px; text-align: center; }
.public-article .article-continuation { max-width: 620px; margin: 0 auto 18px; padding: 18px 20px; border: 1px solid var(--ui-border, rgba(201,169,96,.16)); border-radius: 16px; background: var(--ui-wash, rgba(201,169,96,.06)); text-align: left; }
.public-article .article-continuation-kicker { display: block; color: #9f8754; font-size: 12px; letter-spacing: 2px; }
.public-article .article-continuation p { margin: 6px 0 14px; color: var(--ui-text-secondary, #9a9080); font-size: 12px; line-height: 1.7; }
.public-article .app-continue-link { display: block; width: max-content; max-width: 100%; margin: 0 auto 12px; padding: 10px 18px; border: 1px solid rgba(201,169,96,.24); border-radius: 999px; color: var(--ui-accent, #c9a960); font-size: 13px; }
.public-article .back-link { color: var(--ui-accent, #c9a960); font-size: 13px; }
.public-article .related-articles { margin-top: 52px; padding: 22px; border: 1px solid var(--ui-border, rgba(201,169,96,.16)); border-radius: 16px; background: var(--ui-surface, rgba(24,27,36,.92)); }
.public-article .related-articles h3 { margin: 0 0 14px; color: var(--ui-accent, #c9a960); font-size: 13px; font-weight: 400; letter-spacing: 2px; }
.public-article .related-articles ul { margin: 0; padding: 0; list-style: none; }
.public-article .related-articles li { padding: 9px 0; border-bottom: 1px solid rgba(201,169,96,.08); }
.public-article .related-articles li:last-child { border-bottom: 0; }
.public-article .related-articles a { display: inline-block; color: var(--ui-text-primary, #c7c0b4); font-size: 14px; font-weight: 300; }
.public-article .related-cat { float: right; color: var(--ui-text-tertiary, #77727d); font-size: 11px; }
.public-article .lock-wrap { padding: 28px 0; text-align: center; }
.public-article .lock-icon { margin-bottom: 16px; color: var(--ui-text-tertiary, #77727d); font-size: 48px; }
.public-article .lock-title { margin-bottom: 12px; color: var(--ui-text-primary, #e0d8c8); font-size: 24px; font-weight: 300; letter-spacing: 2px; }
.public-article .lock-desc { margin-bottom: var(--layout-space-5); padding: 0 20px; color: var(--ui-text-secondary, #9a9080); font-size: 14px; line-height: 1.8; }
.public-article .cta-btn { display: inline-block; padding: 12px 32px; border-radius: 40px; background: linear-gradient(135deg, #d4b870, #b8954a); color: #17151a; font-size: 14px; letter-spacing: 1px; }
.public-article .preview-wrap, .public-article .faq-preview { margin-top: 32px; padding: var(--layout-space-5); border: 1px solid var(--ui-border, rgba(201,169,96,.16)); border-radius: 16px; background: var(--ui-surface-deep, #0d1016); text-align: left; }
.public-article .preview-wrap h3, .public-article .faq-preview h3 { margin: 0 0 12px; color: var(--ui-accent, #c9a960); font-size: 13px; font-weight: 400; letter-spacing: 2px; }
.public-article .preview-body { color: var(--ui-text-secondary, #9a9080); font-size: 14px; line-height: 1.8; }
.public-article .faq-item { margin-bottom: 16px; }
.public-article .faq-item:last-child { margin-bottom: 0; }
.public-article .faq-q { margin: 0 0 4px; color: var(--ui-text-primary, #c7c0b4); font-size: 14px; font-weight: 500; }
.public-article .faq-a { margin: 0; color: var(--ui-text-secondary, #9a9080); font-size: 13px; line-height: 1.6; }
.public-article .article-loading { padding: 56px 0; color: var(--ui-text-tertiary, #77727d); text-align: center; }
/* 易经文章：视频是主内容，文字按视频章节提供定位、讲义和复述入口。 */
.public-article .yijing-study-overview { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; margin: 16px 0 8px; padding: 14px; border: 1px solid rgba(201,169,96,.24); border-radius: 15px; background: linear-gradient(135deg, rgba(201,169,96,.1), rgba(201,169,96,.025)); }
.public-article .yijing-study-symbol { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(201,169,96,.3); border-radius: 13px; color: var(--ui-accent, #c9a960); font-family: serif; font-size: 34px; line-height: 1; }
.public-article .yijing-study-main { display: grid; min-width: 0; gap: 3px; align-content: center; }
.public-article .yijing-study-kicker { color: var(--ui-accent, #c9a960); font-size: 10px; letter-spacing: .08em; }
.public-article .yijing-study-main > strong { color: var(--ui-text-primary, #e0d8c8); font-size: 16px; font-weight: 600; line-height: 1.5; }
.public-article .yijing-study-trigrams, .public-article .yijing-study-meta { color: var(--ui-text-tertiary, #77727d); font-size: 11px; line-height: 1.5; }
.public-article .yijing-chapter-list { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 11px; border-top: 1px solid rgba(201,169,96,.14); }
.public-article .yijing-chapter-list small { flex: 0 0 100%; color: var(--ui-text-tertiary, #77727d); font-size: 10px; }
.public-article .yijing-chapter-link { max-width: 100%; padding: 5px 8px; overflow: hidden; border: 1px solid var(--ui-border, rgba(201,169,96,.16)); border-radius: 999px; background: var(--ui-surface, rgba(24,27,36,.92)); color: var(--ui-text-secondary, #9a9080); font: inherit; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.public-article .yijing-chapter-link:hover, .public-article .yijing-chapter-link:focus-visible { border-color: rgba(201,169,96,.48); color: var(--ui-accent, #c9a960); outline: none; }
.public-article .article-module-slot[data-video-chapter] { scroll-margin-top: 76px; }
.public-article .article-module-slot[data-video-relation="本卦原文补充"] { padding-top: 4px; border-top: 1px dashed var(--ui-border, rgba(201,169,96,.16)); }
html[data-theme="light"] body.public-article { background: #f7f4ee; color: #4b463e; }
html[data-theme="light"] .public-article .article-detail h2, html[data-theme="light"] .public-article .module-text h4, html[data-theme="light"] .public-article .pcard-title, html[data-theme="light"] .public-article .lock-title { color: #443e36; }
html[data-theme="light"] .public-article .module-content, html[data-theme="light"] .public-article .article-detail-summary, html[data-theme="light"] .public-article .lock-desc, html[data-theme="light"] .public-article .article-continuation p { color: #766f65; }
html[data-theme="light"] .public-article .practice-card-component, html[data-theme="light"] .public-article .related-articles { background: rgba(255,253,248,.82); }
html[data-theme="light"] .public-article .preview-wrap, html[data-theme="light"] .public-article .faq-preview { background: rgba(255,253,248,.82); }
html[data-theme="light"] .public-article .yijing-study-overview { background: rgba(154,116,65,.055); }
html[data-theme="light"] .public-article .yijing-chapter-link { background: rgba(255,253,248,.82); }
@media (max-width: 640px) {
  .public-article .content-wrap { width: 100%; max-width: none; margin-top: var(--layout-mobile-nav-height); padding: 0 var(--layout-public-page-gutter) var(--layout-page-padding-bottom); }
  .public-article .article-detail { padding-left: 0; padding-right: 0; }
  .public-article .article-detail-header { padding-top: 14px; padding-bottom: 12px; }
  .public-article .module-content { font-size: 15px; line-height: 1.9; }
  .public-article .article-footer, .public-article .related-articles { margin-left: 0; margin-right: 0; }
  .public-article .related-articles { padding: 18px; }
  .public-article .lock-title { font-size: 21px; }
  .public-article .yijing-study-overview { margin-top: 12px; padding: 12px; gap: 10px 11px; }
  .public-article .yijing-study-symbol { width: 46px; height: 46px; font-size: 30px; }
  .public-article .yijing-study-main > strong { font-size: 15px; }
  .public-article .yijing-chapter-list { gap: 5px; }
  .public-article .yijing-chapter-link { max-width: calc(50% - 3px); }
}