/* PC theme tokens are independent of the mini-program. */
.home-articles { width: min(100%,var(--site-content-width)); margin: var(--section-space) auto calc(var(--section-space) + var(--space-xxl)); padding: 0 var(--site-content-gutter); }
.article-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.article-section-heading h2 { margin: 0; font-size: var(--section-title); }
.article-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-xl); }
.article-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--white); }
.article-card:hover { box-shadow: var(--soft-shadow); }
.article-cover { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-card-copy { display: flex; flex-direction: column; flex: 1; padding: var(--space-xl); }
.article-card h3 { margin: var(--space-md) 0; font-size: var(--font-xl); overflow-wrap: anywhere; }
.article-card h3 a { color: var(--text); }
.article-card p { color: var(--muted); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: 0 0 var(--space-lg); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); color: var(--muted); font-size: var(--font-sm); }
.article-meta a,.article-read { color: var(--primary); }
.article-read { margin-top: auto; }
.article-filters { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-xl) 0; }
.article-filters .is-current { color: var(--primary); border-color: var(--primary); background: var(--primary-light); }
.article-detail { max-width: 54rem; margin: auto; overflow-wrap: anywhere; }
.article-detail header { margin: var(--space-xxl) 0; }
.article-detail h1 { line-height: 1.4; }
.article-body { font-size: var(--font-lg); line-height: 1.9; margin-bottom: var(--space-xxl); overflow-x: auto; }
.article-body img { max-width: 100%; height: auto; }
.article-body pre { white-space: pre-wrap; }
.article-body table { max-width: 100%; border-collapse: collapse; }
.article-body td,.article-body th { border: 1px solid var(--border); padding: var(--space-sm); }
.article-body a { color: var(--primary); text-decoration: underline; }
.article-body blockquote { border-left: 3px solid var(--primary); margin-left: 0; padding-left: var(--space-lg); color: var(--muted); }
@media(max-width:1024px) { .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .article-grid { grid-template-columns: minmax(0,1fr); } .article-section-heading h2 { font-size: var(--font-xxl); } .article-detail h1 { font-size: var(--font-xxl); } }

/* Follow the catalog's canvas and typography; keep shared home cards independent. */
body[data-page="articles"],body[data-page="article"] { --text: #333; --muted: #898991; --article-unit: clamp(15px,.9375vw,18px); font-family: PingFangSC-Regular,"PingFang SC","Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif; }
body.pc-app[data-page="articles"] .workspace,body.pc-app[data-page="article"] .workspace { background: linear-gradient(114deg,rgb(223,238,252),rgb(246,250,255) 38%,rgb(255,248,248) 81%,rgb(237,244,255)); }
body[data-page="articles"] .page-container { width: min(100%,var(--site-content-width)); max-width: none; padding: calc(var(--article-unit)*4.688) var(--site-content-gutter); }
.articles-intro { text-align: center; margin-bottom: var(--space-xxl); }
.articles-intro h1 { margin: 0; font-size: calc(var(--article-unit)*2.917); font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.articles-intro h1 span { background: linear-gradient(90deg,rgb(0,125,255),rgb(123,97,255) 50%,rgb(247,69,255)); background-clip: text; -webkit-background-clip: text; color: transparent; }
.articles-intro p { margin: var(--space-lg) 0 0; color: var(--muted); font-size: var(--font-lg); }
.articles-page .article-filters { justify-content: center; gap: var(--space-sm); margin: 0 0 calc(var(--space-xl)*2); }
.articles-page .article-filters a { min-height: 0; padding: var(--space-sm) var(--space-xl); border: 0; border-radius: calc(var(--space-xl)*4); background: transparent; color: var(--text); font-size: var(--font-lg); font-weight: 400; line-height: 1.6; box-shadow: none; }
.articles-page .article-filters a:not(.is-current):hover { color: var(--primary); }
.articles-page .article-filters .is-current { background: var(--primary); color: var(--white); }
.articles-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,20rem); gap: var(--space-xxl); align-items: start; }
.articles-main { min-width: 0; }
.articles-main .article-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); }
.articles-main .article-card { flex-direction: row; align-items: stretch; gap: var(--space-xl); padding: var(--space-xl); border: 2px solid transparent; border-radius: calc(var(--article-unit)*1.563); transition: border-color .25s,box-shadow .25s; }
.articles-main .article-card:hover { border-color: rgba(0,125,255,.6); box-shadow: 0 10px 30px rgba(85,85,255,.08); }
.articles-main .article-card > a { width: 28%; max-width: calc(var(--space-xl)*10); flex-shrink: 0; align-self: flex-start; }
.articles-main .article-cover { aspect-ratio: 3/2; border-radius: var(--radius-lg); }
.articles-main .article-card-copy { min-width: 0; padding: 0; }
.articles-main .article-card h3 { margin: 0 0 var(--space-sm); font-size: var(--font-xl); font-weight: 600; line-height: 1.55; }
.articles-main .article-card h3 a:hover { color: var(--primary); }
.articles-main .article-card p { -webkit-line-clamp: 2; font-size: var(--font-base); line-height: 1.7; margin-bottom: var(--space-md); }
.articles-main .article-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: auto; padding-top: var(--space-md); }
.articles-main .article-card-footer .article-meta { flex: 1; min-width: 0; }
.articles-main .article-read { margin: 0; flex-shrink: 0; font-size: var(--font-sm); white-space: nowrap; }
.articles-main .article-read span { margin-left: var(--space-xs); }
.articles-sidebar { display: grid; gap: var(--space-xl); min-width: 0; }
.article-sidebar-panel { border-radius: calc(var(--article-unit)*1.563); padding: var(--space-xl); background: var(--white); }
.article-sidebar-panel h2 { margin: 0 0 var(--space-xl); font-size: var(--font-xl); font-weight: 600; letter-spacing: 0; padding-left: var(--space-md); border-left: var(--space-xs) solid var(--primary); line-height: 1.2; }
.article-sidebar-panel > p { margin-bottom: 0; }
.article-sidebar-list { list-style: none; padding: 0; margin: 0; }
.article-sidebar-list li + li { margin-top: var(--space-xl); }
.article-sidebar-link { display: flex; gap: var(--space-md); align-items: center; color: var(--text); }
.article-sidebar-link:hover,.article-sidebar-link:focus-visible { color: var(--primary); }
.article-sidebar-cover { width: calc(var(--space-xl)*3); aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; }
.article-sidebar-copy { min-width: 0; }
.article-sidebar-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--font-base); line-height: 1.6; }
.article-sidebar-copy time { display: block; margin-top: var(--space-xs); color: var(--muted); font-size: var(--font-sm); }
.articles-page a:focus-visible { outline: 2px solid var(--primary); outline-offset: var(--space-xs); }
@media(max-width:900px) { .articles-layout { grid-template-columns: minmax(0,1fr); } .articles-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 body[data-page="articles"] .page-container { padding-top: var(--space-xxl); padding-bottom: calc(var(--space-xxl)*2); }
 .articles-intro h1 { font-size: var(--font-xxl); }
 .articles-intro p { font-size: var(--font-base); }
 .articles-page .article-filters { gap: var(--space-sm); margin-bottom: var(--space-xl); }
 .articles-page .article-filters a { font-size: var(--font-base); padding: var(--space-sm) var(--space-lg); }
 .articles-main .article-card { padding: var(--space-lg); gap: var(--space-lg); align-items: flex-start; }
 .articles-main .article-card > a { width: 28%; margin-top: 0; }
 .articles-main .article-card-footer { flex-direction: column; align-items: flex-start; padding-top: 0; }
 .articles-main .article-cover { aspect-ratio: 1; }
 .articles-main .article-card h3 { font-size: var(--font-md); }
 .articles-main .article-card p { font-size: var(--font-base); }
 .articles-sidebar { grid-template-columns: minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .articles-main .article-card { transition: none; } }

body[data-page="article"] .page-container { width: min(100%,var(--site-content-width)); max-width: none; padding: calc(var(--space-xl)*2) var(--site-content-gutter) calc(var(--space-xxl)*3); }
.article-detail { max-width: none; }
.article-detail-layout .article-paper { min-width: 0; padding: var(--space-xxl); }
.article-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-bottom: var(--space-xl); color: var(--muted); font-size: var(--font-base); }
.article-breadcrumb a { color: var(--text); }
.article-breadcrumb a:hover { color: var(--primary); }
.article-paper { background: var(--white); border-radius: var(--radius-xl); padding: calc(var(--space-xxl)*2); }
.article-detail .article-detail-heading { margin: 0 0 var(--space-xxl); padding-bottom: var(--space-xxl); border-bottom: 1px solid var(--border); }
.article-detail h1 { margin: 0 0 var(--space-xl); font-size: calc(var(--font-md)*2); line-height: 1.5; font-weight: 600; letter-spacing: 0; text-wrap: pretty; }
.article-detail .article-meta { align-items: center; gap: var(--space-sm) var(--space-lg); font-size: var(--font-base); }
.article-detail .article-meta a { background: var(--primary-light); border-radius: var(--space-xxl); padding: var(--space-xs) var(--space-md); }
.article-detail .article-meta a:hover { background: var(--primary); color: var(--white); }
.article-detail .article-body { color: var(--text); font-size: var(--font-lg); line-height: 1.95; margin: 0; }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }
.article-body p { margin: 0 0 var(--space-xl); }
.article-body h2,.article-body h3,.article-body h4 { letter-spacing: 0; line-height: 1.6; font-weight: 600; margin: var(--space-xxl) 0 var(--space-md); }
.article-body h2 { font-size: var(--font-xxl); }
.article-body h3 { font-size: var(--font-xl); }
.article-body h4 { font-size: var(--font-lg); }
.article-body ul,.article-body ol { padding-left: var(--space-xl); margin: 0 0 var(--space-xl); }
.article-body li + li { margin-top: var(--space-sm); }
.article-body img { border-radius: var(--radius-lg); vertical-align: middle; }
.article-body blockquote { background: var(--hover); padding: var(--space-lg) var(--space-xl); margin: var(--space-xl) 0; border-color: var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-body blockquote p:last-child { margin-bottom: 0; }
.article-body pre { padding: var(--space-lg); border-radius: var(--radius-md); background: var(--hover); }
.article-body th { background: var(--hover); }
.article-detail a:focus-visible { outline: 2px solid var(--primary); outline-offset: var(--space-xs); }
@media(max-width:900px) { .article-paper { padding: var(--space-xxl); } }
@media(max-width:600px) {
 body[data-page="article"] .page-container { padding-top: var(--space-xl); padding-bottom: calc(var(--space-xxl)*2); }
 .article-breadcrumb { margin-bottom: var(--space-lg); font-size: var(--font-base); }
 .article-paper { padding: var(--space-xl) var(--space-lg); }
 .article-detail h1 { font-size: var(--font-xxl); margin-bottom: var(--space-lg); }
 .article-detail .article-detail-heading { padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); }
 .article-detail .article-meta { font-size: var(--font-sm); }
 .article-detail .article-body { font-size: var(--font-md); }
 .article-body h2 { font-size: var(--font-xl); }
 .article-body h3 { font-size: var(--font-lg); }
}

@media(max-width:600px) { .article-detail-layout .article-paper { padding: var(--space-xl) var(--space-lg); } }

.home-articles .home-news-heading { margin-bottom: calc(var(--space-xl)*2); }
.home-articles .article-grid { gap: var(--space-xxl); }
.home-articles .article-card { border: 0; border-radius: var(--space-xl); background: var(--hover); box-shadow: none; outline: 2px solid transparent; transition: outline-color .25s; }
.home-articles .article-card:hover { box-shadow: none; outline-color: var(--primary); }
.home-articles .article-card > a { display: block; margin: 0; overflow: hidden; }
.home-articles .article-cover { aspect-ratio: 2.2; }
.home-articles .article-card-copy { padding: var(--space-xl); }
.home-articles .article-meta a { color: var(--muted); }
.home-articles .article-meta a:hover { color: var(--primary); }
.home-articles .article-card h3 { font-weight: 600; line-height: 1.5; margin: 0 0 var(--space-md); }
.home-articles .article-card h3 a:hover { color: var(--primary); }
.home-articles .article-card p { font-size: var(--font-md); line-height: 1.75; -webkit-line-clamp: 2; margin-bottom: var(--space-xl); }
.home-news-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: auto; padding-top: 0; font-size: var(--font-sm); }
.home-news-card-footer time { color: var(--muted); font-size: var(--font-sm); }
.home-news-card-footer .article-read { margin: 0; white-space: nowrap; }
.home-news-card-footer .article-meta { flex: 1; min-width: 0; gap: var(--space-xs) var(--space-md); }
.home-news-actions { text-align: center; margin-top: calc(var(--space-xl)*2); }
.home-articles .home-news-more { border-radius: calc(var(--space-xl)*4); background: var(--primary); color: var(--white); border: 2px solid var(--primary); padding: var(--space-md) var(--space-xxl); gap: var(--space-lg); font-size: var(--font-md); font-weight: 400; }
.home-articles .home-news-more:hover { background: var(--white); color: var(--primary); }
.home-articles a:focus-visible { outline: 2px solid var(--primary); outline-offset: var(--space-xs); }
@media(min-width:901px) { .home-articles .article-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media(min-width:601px) and (max-width:900px) { .home-articles .article-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) and (min-width:601px) { .home-articles .article-grid { gap: var(--space-lg); } .home-articles .article-card-copy { padding: var(--space-lg); } .home-articles .article-card h3 { font-size: var(--font-lg); } }
@media(max-width:600px) { .home-articles .home-news-heading { margin-bottom: var(--space-xxl); } .home-articles .article-card h3 { min-height: 0; } .home-news-actions { margin-top: var(--space-xxl); } }
@media(prefers-reduced-motion:reduce) { .home-articles .article-card { transition: none; } }

.article-sidebar-tool-icon { width: calc(var(--space-xl)*2); aspect-ratio: 1; object-fit: contain; }
.article-sidebar-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--font-sm); line-height: 1.6; margin-top: var(--space-xs); }

.article-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-md); margin-top: calc(var(--space-xl)*2); }
.article-page-numbers { display: flex; gap: var(--space-sm); }
.article-page-number,.article-page-step { display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--space-lg)*3); min-height: calc(var(--space-lg)*3); padding: var(--space-sm) var(--space-md); border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--white); color: var(--text); font-size: var(--font-base); line-height: 1.5; font-weight: 400; }
.article-page-step { padding-inline: var(--space-xl); }
.article-pagination a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.article-page-number.is-current { color: var(--white); background: var(--primary); }
.article-page-step.is-disabled { color: var(--muted); background: transparent; opacity: .6; }
@media(max-width:600px) { .article-page-numbers { order: -1; width: 100%; justify-content: center; } .article-pagination { margin-top: var(--space-xxl); } }