/* index/help_article.html 页面独立样式 */
/* 文章卡片 */
    .article-page .article-card {
        background: #fff;
        border: 1px solid #eef0f3;
        border-radius: 14px;
        padding: 28px 32px 32px;
    }
    .article-page .article-head {
        padding-bottom: 18px;
        margin-bottom: 24px;
        border-bottom: 1px solid #f1f3f5;
    }
    .article-page .article-title {
        margin-bottom: 12px;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.4;
        color: #1f2a44;
    }
    .article-page .article-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        color: #98a2ae;
        font-size: 13px;
    }
    .article-page .article-meta > span + span::before {
        content: "";
        display: inline-block;
        width: 1px;
        height: 12px;
        margin: 0 10px;
        vertical-align: -1px;
        background: #e6ebf0;
    }

    /* 正文排版 */
    .article-page .article-content {
        color: #3f4753;
        font-size: 15px;
        line-height: 1.9;
        word-break: break-word;
    }
    .article-page .article-content p { margin-bottom: 1rem; }
    .article-page .article-content h1,
    .article-page .article-content h2,
    .article-page .article-content h3,
    .article-page .article-content h4,
    .article-page .article-content h5,
    .article-page .article-content h6 {
        margin: 1.6rem 0 .8rem;
        font-weight: 600;
        color: #1f2a44;
    }
    .article-page .article-content a { color: #0067b8; }
    .article-page .article-content a:hover { text-decoration: underline; }
    .article-page .article-content ul,
    .article-page .article-content ol { margin-bottom: 1rem; padding-left: 1.4rem; }
    .article-page .article-content li { margin-bottom: .35rem; }
    .article-page .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        cursor: zoom-in;
        transition: transform .3s, box-shadow .3s;
    }
    .article-page .article-content img:hover {
        transform: scale(1.005);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    }
    .article-page .article-content pre {
        padding: 14px 16px;
        margin-bottom: 1rem;
        background: #f7f9fb;
        border: 1px solid #eef0f3;
        border-radius: 8px;
        color: #374151;
        font-size: 13px;
        line-height: 1.7;
        overflow: auto;
    }
    .article-page .article-content code {
        padding: 2px 5px;
        border-radius: 4px;
        background: #f3f5f7;
        color: #d6336c;
        font-size: 90%;
    }
    .article-page .article-content pre code {
        padding: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
    }
    .article-page .article-content blockquote {
        padding: 10px 16px;
        margin-bottom: 1rem;
        background: #f6fbf8;
        border-left: 3px solid #28a745;
        border-radius: 0 6px 6px 0;
        color: #5a6472;
    }
    .article-page .article-content table {
        width: 100%;
        margin-bottom: 1rem;
        border-collapse: collapse;
    }
    .article-page .article-content table th,
    .article-page .article-content table td {
        padding: 8px 12px;
        border: 1px solid #eef0f3;
    }
    .article-page .article-content table th { background: #fafbfc; }

    /* 侧栏：随页面滚动吸顶 */
    .article-page .side-sticky {
        position: sticky;
        top: 20px;
    }
    .article-page .side-card {
        padding: 20px;
        background: #fff;
        border: 1px solid #eef0f3;
        border-radius: 14px;
    }
    .article-page .side-help { margin-top: 20px; }
    .article-page .side-title {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
        font-weight: 600;
        color: #1f2a44;
    }
    .article-page .side-title::before {
        content: "";
        width: 4px;
        height: 15px;
        margin-right: 8px;
        border-radius: 2px;
        background: linear-gradient(180deg, #34c759, #28a745);
    }
    .article-page .hot-item {
        display: flex;
        padding: 11px 0;
        border-bottom: 1px dashed #f0f2f4;
    }
    .article-page .hot-item:last-child { border-bottom: 0; padding-bottom: 0; }
    .article-page .hot-index {
        flex: 0 0 20px;
        height: 20px;
        margin-right: 10px;
        line-height: 20px;
        text-align: center;
        border-radius: 6px;
        background: #f3f5f7;
        color: #98a2ae;
        font-size: 12px;
        font-weight: 600;
    }
    .article-page .hot-item:nth-child(1) .hot-index { background: #ffecec; color: #e5484d; }
    .article-page .hot-item:nth-child(2) .hot-index { background: #fff3e6; color: #f08c00; }
    .article-page .hot-item:nth-child(3) .hot-index { background: #fff9db; color: #c99700; }
    .article-page .hot-title {
        display: block;
        color: #4b5563;
        font-size: 14px;
        line-height: 1.5;
    }
    .article-page .hot-title:hover { color: #0067b8; }
    .article-page .side-help .side-help-title {
        margin-bottom: 6px;
        font-weight: 600;
        color: #1f2a44;
    }

    @media (max-width: 991.98px) {
        .article-page .side-sticky { position: static; }
    }
    @media (max-width: 575.98px) {
        .article-page .article-card { padding: 20px 18px 24px; }
        .article-page .article-title { font-size: 21px; }
    }

    /* 图片查看器 */
    .article-viewer {
        display: none;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .95);
        overflow: hidden;
    }
    .article-viewer .image-wrapper {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: grab;
    }
    .article-viewer .image-wrapper:active { cursor: grabbing; }
    .article-viewer .viewer-content {
        max-width: 70%;
        transform-origin: center center;
        transition: transform .1s ease-out;
        user-select: none;
        -webkit-user-drag: none;
    }
    .article-viewer .hint-text {
        position: absolute;
        top: 20px;
        left: 30px;
        z-index: 10001;
        color: rgba(255, 255, 255, .6);
        font-size: 14px;
        pointer-events: none;
    }
    .article-viewer .controls {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        z-index: 10001;
        padding: 10px 20px;
        border-radius: 30px;
        background: rgba(255, 255, 255, .1);
        backdrop-filter: blur(5px);
    }
    .article-viewer .control-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 10px;
        border-radius: 50%;
        cursor: pointer;
        transition: background .3s;
    }
    .article-viewer .control-btn:hover { background: rgba(255, 255, 255, .2); }