body.help-article {
    height: 100vh;
    color: var(--help-text);
    background: #fff;
    overflow: hidden;
}

body.help-article .header-inner { width: 100%; padding: 0 20px; }

.article-shell {
    display: flex;
    height: 100%;
    padding-top: 64px;
    background: #fff;
}

.article-main {
    min-width: 0;
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background: #f5f6f8;
}

@supports not (scrollbar-gutter: stable) {
    .article-main { overflow-y: scroll; }
}

.article-container {
    position: relative;
    width: 900px;
    min-height: 100%;
    margin: 0 auto;
    padding: 48px 0 64px;
}

.article-loading {
    position: absolute;
    z-index: 2;
    inset: 48px 0 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    border-radius: 14px;
    color: #8b929d;
    background: #fff;
    font-size: 14px;
}
.article-loading[hidden] { display: none; }
.article-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e4ebf8;
    border-top-color: var(--help-blue);
    border-radius: 50%;
    animation: article-loading-spin .8s linear infinite;
}
@keyframes article-loading-spin { to { transform: rotate(360deg); } }

.article-content {
    margin-top: 0;
    padding: 42px 56px 48px;
    border-radius: 14px;
    background: #fff;
    opacity: 0;
}
.article-content.is-ready { opacity: 1; transition: opacity .18s ease; }

.article-content h1 {
    color: #25272c;
    font-size: 28px;
    line-height: 1.4;
}

.article-error { margin-top: 12px; color: #9da1a8; font-size: 14px; }

.article-summary {
    margin-top: 26px;
    padding: 17px 19px;
    border-radius: 8px;
    color: #4f5865;
    background: #f3f7ff;
    font-size: 15px;
    line-height: 1.75;
}

.article-section { margin-top: 34px; }
.article-section h2 { color: #30343a; font-size: 20px; line-height: 1.5; }
.article-section p { margin-top: 13px; color: #60656d; font-size: 15px; line-height: 1.9; }
.article-section ol { margin: 16px 0 0 22px; color: #60656d; font-size: 15px; line-height: 2; }

#article-body { color: #34383f; }
#article-body h1, #article-body h2, #article-body h3, #article-body h4 { margin: 30px 0 12px; color: inherit; line-height: 1.5; }
#article-body.ql-editor { height: auto; padding: 0; overflow: visible; white-space: normal; }
#article-body h1 { font-size: 24px; }
#article-body h2 { font-size: 20px; }
#article-body h3 { font-size: 18px; }
#article-body h4 { font-size: 16px; }
#article-body p { margin-top: 12px; color: inherit; font-size: 15px; line-height: 1.9; }
#article-body ul, #article-body ol { margin: 14px 0 0 24px; color: inherit; font-size: 15px; line-height: 2; }
#article-body blockquote { margin: 18px 0; padding: 14px 18px; border-left: 3px solid #79a9ff; border-radius: 0 6px 6px 0; color: inherit; background: #f3f7ff; }
#article-body img { display: block; max-width: 100%; height: auto; margin: 20px auto; border-radius: 8px; }
#article-body video { display: block; width: 100%; max-width: 900px; height: auto; margin: 20px auto; border-radius: 8px; background: #000; }
#article-body a { color: var(--help-blue); text-decoration: underline; }
#article-body .help-link-card { margin: 20px 0; border: 1px solid #eef0f4; border-radius: 10px; background: #fff; box-shadow: 0 5px 18px rgba(31,45,66,.08); }
#article-body .help-link-card > a { display: flex; min-height: 92px; align-items: center; gap: 20px; padding: 18px 16px; color: inherit; text-decoration: none; }
#article-body .help-link-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
#article-body .help-link-copy strong { overflow: hidden; color: #25282d; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
#article-body .help-link-copy small { overflow: hidden; margin-top: 5px; color: #6e747d; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
#article-body .help-link-action { flex: 0 0 auto; padding: 7px 15px; border: 1px solid var(--help-blue); border-radius: 3px; color: var(--help-blue); background: #fff; font-size: 14px; }
#article-body .help-document-list { margin: 16px 0; padding: 5px 24px; border: 1px solid #dde1e7; border-radius: 6px; background: #fff; }
#article-body .help-document-item { display: flex; min-height: 94px; align-items: center; gap: 16px; color: inherit; text-decoration: none; cursor: pointer; }
#article-body .help-document-item:hover, #article-body .help-document-item strong, #article-body .help-document-item small { text-decoration: none !important; }
#article-body .help-document-item + .help-document-item { border-top: 1px solid #e1e4e8; }
#article-body .help-document-icon { flex: 0 0 46px; width: 46px; height: 56px; background-position: center; background-size: contain; background-repeat: no-repeat; }
#article-body .help-document-icon-pdf { background-image: url('../image/pdf.png'); }
#article-body .help-document-icon-doc { background-image: url('../image/doc.png'); }
#article-body .help-document-icon-xlsx { background-image: url('../image/xlsx.png'); }
#article-body .help-document-icon-ppt { background-image: url('../image/ppt.png'); }
#article-body .help-document-info { display: flex; min-width: 0; flex-direction: column; }
#article-body .help-document-info strong { overflow: hidden; color: #24272d; font-size: 17px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
#article-body .help-document-info small { margin-top: 5px; color: #9298a1; font-size: 14px; }
#article-body .help-document-item:hover .help-document-info strong { color: var(--help-blue); }

.sidebar-list a.is-current { color: var(--help-blue); font-weight: 700; }

@media (max-width: 820px) {
    .article-shell { padding-top: 64px; }
    .article-shell .help-sidebar { display: none; }
    .article-container { width: calc(100% - 30px); padding-top: 28px; }
    .article-content { padding: 28px 22px 34px; }
    .article-content h1 { font-size: 24px; }
}