/* 文章详情页样式 - 简约风格版（左右分栏布局） */





.qm-article-detail {

    min-height: 100vh;

    background: #f9fafb;

    position: relative;

    padding-bottom: 0;

    margin-bottom: 0;

}



/* 确保背景延伸到页脚 */

main.qm-article-detail {

    background: #f9fafb;

    min-height: 100vh;

    padding-bottom: 0;

    margin-bottom: 0;

}



/* 确保主内容区背景延伸到页脚，移除底部间距 */

.qm-article-detail .qm-article-detail-container {

    padding-bottom: 0;

    margin-bottom: 0;

}



/* 确保背景完全覆盖到页脚 */

.qm-article-detail {

    margin-bottom: 0;

    padding-bottom: 0;

}



/* 移除文章详情页和页脚之间的间距 */

body.single .site-footer.mt-5 {

    margin-top: 0 !important;

}





.qm-article-sticky-wrapper {

    position: fixed;

    top: 20px;

    left: 50%;

    transform: translateX(-50%) translateY(-100%);

    z-index: 100;

    display: flex;

    align-items: center;

    gap: 12px;

    transition: all 0.3s ease;

    opacity: 0;

    pointer-events: none;

    max-width: calc(100% - 80px); 

    width: auto;

}



.qm-article-sticky-wrapper.is-visible {

    transform: translateX(-50%) translateY(0);

    opacity: 1;

    pointer-events: auto;

}





body.qm-header-fixed .qm-article-sticky-wrapper {

    top: calc(var(--qm-header-height, 60px) + 20px);

}





.qm-article-sticky-header {

    width: auto;

    max-width: none; 

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px) saturate(180%);

    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(0, 0, 0, 0.1);

    border-radius: 999px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

    flex: 1; 

    min-width: 0; 

}



.qm-sticky-header-content {

    padding: 10px 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 0;

    width: 100%;

}



.qm-sticky-header-title {

    font-size: 15px;

    font-weight: 500;

    color: #374151;

    margin: 0;

    text-align: center;

    word-wrap: break-word; 

    word-break: break-word; 

    overflow-wrap: break-word; 

    line-height: 1.4; 

    max-width: 100%;

}





.qm-article-back-to-top {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    border: none;

    background: rgba(255, 255, 255, 0.95);

    backdrop-filter: blur(20px) saturate(180%);

    -webkit-backdrop-filter: blur(20px) saturate(180%);

    color: #2563eb;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 13px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    border: 1px solid rgba(37, 99, 235, 0.1);

}



.qm-article-back-to-top:hover {

    background: #2563eb;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);

}







.qm-sidebar-author-card {

    background: #ffffff;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 24px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    border: 1px solid #e5e7eb;

}



.qm-sidebar-author-header {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}



.qm-sidebar-author-avatar {

    flex-shrink: 0;

    width: 56px;

    height: 56px;

    border-radius: 50%;

    overflow: hidden;

    border: 2px solid #e5e7eb;

}



.qm-sidebar-author-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.qm-sidebar-author-info {

    flex: 1;

    min-width: 0;

}



.qm-sidebar-author-name {

    font-size: 16px;

    font-weight: 600;

    margin: 0 0 4px 0;

}



.qm-sidebar-author-name a {

    color: #111827;

    text-decoration: none;

    transition: color 0.2s;

}



.qm-sidebar-author-name a:hover {

    color: #2563eb;

}



.qm-sidebar-author-desc {

    font-size: 13px;

    color: #6b7280;

    margin: 0;

    line-height: 1.5;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}





.qm-sidebar-author-posts {

    background: #ffffff;

    border-radius: 12px;

    padding: 20px;

    margin-bottom: 24px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    border: 1px solid #e5e7eb;

}



.qm-sidebar-section-title {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 16px;

    font-weight: 600;

    color: #111827;

    margin: 0 0 16px 0;

}



.qm-sidebar-section-title i {

    color: #2563eb;

    font-size: 14px;

}



.qm-sidebar-author-posts-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.qm-sidebar-author-post-item {

    margin-bottom: 12px;

}



.qm-sidebar-author-post-item:last-child {

    margin-bottom: 0;

}



.qm-sidebar-author-post-link {

    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 12px;

    border-radius: 8px;

    background: #f9fafb;

    text-decoration: none;

    transition: all 0.2s;

    border: 1px solid transparent;

}



.qm-sidebar-author-post-link:hover {

    background: #f3f4f6;

    border-color: #e5e7eb;

}



.qm-sidebar-author-post-title {

    font-size: 14px;

    font-weight: 500;

    color: #111827;

    line-height: 1.4;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.qm-sidebar-author-post-link:hover .qm-sidebar-author-post-title {

    color: #2563eb;

}



.qm-sidebar-author-post-date {

    font-size: 12px;

    color: #9ca3af;

}





.qm-article-hero-banner {

    position: relative;

    width: 100%;

    min-height: auto;

    height: auto;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    padding: 60px 20px 40px;

}



.qm-article-hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    z-index: 1;

    

    display: block;

    

    opacity: 1;

    visibility: visible;

    

    background-color: transparent;

    

    background-attachment: scroll;

}



.qm-article-hero-bg-default {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

}



.qm-article-hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    

    background: rgba(0, 0, 0, 0.3);

    backdrop-filter: blur(20px) saturate(180%);

    -webkit-backdrop-filter: blur(20px) saturate(180%);

    z-index: 1;

    

    pointer-events: none;

    

    mix-blend-mode: normal;

}



.qm-article-hero-content-wrapper {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

}



/* Bootstrap容器类在hero中的调整 */

.qm-article-hero-content-wrapper.container {

    padding-left: 15px;

    padding-right: 15px;

}



@media (max-width: 767.98px) {

    .qm-article-hero-banner {

        padding: 40px 15px 30px;

    }

    

    .qm-article-hero-content-wrapper {

        padding: 0;

    }

    

    .qm-article-hero-content-inner {

        padding: 24px 16px;

    }

}



.qm-article-hero-content-inner {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(20px) saturate(180%);

    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border-radius: 16px;

    padding: 40px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    max-width: 1200px;

    width: 100%;

}



.qm-article-hero-main {

    display: flex;

    align-items: center;

    gap: 40px;

    margin-bottom: 32px;

}



/* 移动端响应式调整 */

@media (max-width: 991.98px) {

    .qm-article-hero-main {

        flex-direction: column;

        align-items: flex-start;

        gap: 24px;

    }

    

    .qm-article-hero-right {

        width: 100%;

        justify-content: center !important;

    }

}



.qm-article-hero-left {

    flex: 1;

    min-width: 0;

}



.qm-article-hero-right {

    flex-shrink: 0;

}



.qm-article-hero-thumbnail {

    width: 160px;

    height: 160px;

    border-radius: 16px;

    overflow: visible;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

    border: 3px solid rgba(255, 255, 255, 0.3);

    background: rgba(255, 255, 255, 0.1);

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}



.qm-article-hero-thumbnail img:not(.qm-mockup-image):not(.qm-mockup-frame) {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



/* 电脑样机样式 */

.qm-article-hero-thumbnail.qm-mockup-thumbnail {

    overflow: visible;

    background: transparent;

    border: none;

    width: auto;

    height: auto;

    min-width: 160px;

    min-height: 160px;

    max-width: 200px;

    max-height: 200px;

}



.qm-article-hero-thumbnail .qm-mockup-image {

    width: 100%;

    height: auto;

    max-width: 200px;

    object-fit: contain;

    position: relative;

    z-index: 2;

    display: block;

}



.qm-article-hero-thumbnail .qm-mockup-screen {

    position: absolute;

    top: 22%;

    left: 20%;

    width: 60%;

    height: 38%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    border-radius: 4px;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.qm-article-hero-thumbnail .qm-mockup-screen.loaded {

    opacity: 1;

}



.qm-article-hero-thumbnail .qm-mockup-frame {

    position: relative;

    width: 100%;

    height: auto;

    max-width: 200px;

    object-fit: contain;

    z-index: 2;

    pointer-events: none;

    display: block;

}



.qm-article-hero-title {

    font-size: 36px;

    font-weight: 700;

    line-height: 1.4;

    color: #ffffff !important;

    margin: 0 0 24px 0;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.qm-article-hero-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 16px 24px;

    margin-bottom: 24px;

    color: #ffffff;

}



.qm-article-hero-meta .qm-meta-item {

    color: rgba(255, 255, 255, 0.9);

    display: flex;

    align-items: center;

    gap: 6px;

}



.qm-article-hero-meta .qm-meta-item i {

    color: rgba(255, 255, 255, 0.8);

}



.qm-article-hero-meta .qm-meta-item span {

    color: rgba(255, 255, 255, 0.9);

}



.qm-article-hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.qm-article-hero-tag {

    display: inline-flex;

    align-items: center;

    padding: 6px 14px;

    border-radius: 20px;

    font-size: 13px;

    background: rgba(255, 255, 255, 0.2);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.3);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    text-decoration: none;

    transition: all 0.2s;

}



.qm-article-hero-tag:hover {

    background: rgba(255, 255, 255, 0.3);

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

}



.qm-article-hero-actions {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    flex-wrap: wrap;

    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.2);

}





.qm-article-hero-banner .qm-article-tags-row {

    margin-bottom: 20px;

}



.qm-article-hero-banner .qm-article-tag-category {

    background: rgba(255, 255, 255, 0.2);

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.3);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}



.qm-article-hero-banner .qm-article-tag-item {

    background: transparent;

    color: #ffffff;

    border: none;

}



.qm-article-hero-banner .qm-article-tag-item:hover {

    background: rgba(255, 255, 255, 0.1);

    color: #ffffff;

}





.qm-article-hero-banner .qm-article-title {

    font-size: 36px;

    font-weight: 700;

    line-height: 1.4;

    color: #ffffff;

    margin: 0 0 24px 0;

    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}





.qm-article-hero-banner .qm-article-meta-info {

    display: flex;

    flex-wrap: wrap;

    gap: 16px 24px;

    border-bottom: none;

    padding-bottom: 0;

    color: #ffffff;

}



.qm-article-hero-banner .qm-meta-item {

    color: rgba(255, 255, 255, 0.9);

}



.qm-article-hero-banner .qm-meta-item i {

    color: rgba(255, 255, 255, 0.8);

}



.qm-article-hero-banner .qm-meta-item span {

    color: rgba(255, 255, 255, 0.9);

}



.qm-price-badge {

    padding: 3px 9px;

    border-radius: 999px;

    font-size: 12px;

    line-height: 1.4;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

}



.qm-price-badge-main {

    color: #0f172a;

    background: rgba(248, 250, 252, 0.9);

}



.qm-price-badge-vip {

    color: #b45309;

    background: rgba(254, 243, 199, 0.9);

}



.dark .qm-price-badge-main,

body.dark .qm-price-badge-main {

    color: #e5e7eb;

    background: rgba(15, 23, 42, 0.9);

}



.dark .qm-price-badge-vip,

body.dark .qm-price-badge-vip {

    color: #facc15;

    background: rgba(24, 20, 11, 0.9);

}





.qm-article-download-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 32px;

    align-items: center;

}



.qm-download-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 24px;

    font-size: 15px;

    font-weight: 600;

    border-radius: 8px;

    border: none;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    white-space: nowrap;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.qm-download-btn i {

    font-size: 14px;

}



.qm-download-btn-primary {

    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

    color: #ffffff;

}



.qm-download-btn-primary:hover {

    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);

}





.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan {

    background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);

    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.28);

}

.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan:hover {

    transform: translateY(-2px);

    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.32);

}

.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan-baidu {

    background: linear-gradient(135deg, #1677ff 0%, #0ea5e9 100%);

    box-shadow: 0 6px 16px rgba(22, 119, 255, 0.30);

}

.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan-baidu:hover {

    box-shadow: 0 10px 22px rgba(22, 119, 255, 0.36);

}

.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan-quark {

    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);

}

.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan-aliyun {

    background: linear-gradient(135deg, #ff6a00 0%, #ffb000 100%);

}

.qm-download-btn.qm-download-btn-primary.qm-download-btn-pan-lanzou {

    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);

}



.qm-download-btn-secondary {

    background: rgba(255, 255, 255, 0.95);

    color: #374151;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.3);

}



.qm-download-btn-secondary:hover {

    background: rgba(255, 255, 255, 1);

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);

}



.qm-download-btn-vip {

    background: linear-gradient(0deg, hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1)), linear-gradient(95.9deg, #ffeec3 3.14%, #ffe5ba 23.99%, #ffd8aa 43.77%, #ffd4a2 62.06%, #ffc896 79.86%, #fcb4ba 97.91%);

    color: #6b2d00;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.qm-download-btn-vip:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 16px rgba(255, 204, 150, 0.4);

}



.qm-download-btn-vip i {

    color: #6b2d00;

}





@media (max-width: 768px) {

    .qm-article-download-actions {

        flex-direction: column;

        width: 100%;

    }

    

    .qm-download-btn {

        width: 100%;

        justify-content: center;

    }

}





.qm-article-detail-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 20px 20px 0 20px;

    display: flex;

    gap: 24px;

    align-items: flex-start;

}



/* Bootstrap容器类覆盖 */

.qm-article-detail-container.container {

    padding-left: 15px;

    padding-right: 15px;

}



/* 确保移动端容器与浏览器边缘保持适当距离 */

@media (max-width: 767.98px) {

    .qm-article-detail-container.container {

        padding-left: 15px;

        padding-right: 15px;

    }

    

    .qm-article-detail-container {

        padding-left: 15px;

        padding-right: 15px;

    }

}



@media (max-width: 991.98px) {

    .qm-article-detail-container {

        flex-direction: column;

        padding: 20px 15px 0;

    }

    

    .qm-article-detail-container .row {

        margin-left: 0;

        margin-right: 0;

    }

    

    /* 确保移动端内容与浏览器边缘保持距离 */

    .qm-article-detail-container.container {

        padding-left: 15px;

        padding-right: 15px;

    }

}





.qm-article-main-content {

    flex: 1;

    min-width: 0;

    background: #ffffff;

    border-radius: 12px;

    padding: 32px;

    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

}



/* 移动端文章内容内边距 */

@media (max-width: 767.98px) {

    .qm-article-main-content {

        padding: 20px 16px;

        border-radius: 0;

        margin: 0;

    }

    

    .qm-article-content {

        padding: 0;

    }

    

    /* 确保文章内容与容器边缘保持距离 */

    .qm-article-body {

        padding: 0;

    }

}





.qm-article-sidebar {

    width: 80px;

    flex-shrink: 0;

}





.qm-post-actions-float {

    position: fixed;

    top: 50%;

    right: 32px;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    z-index: 40;

}



.qm-author-float-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

}



.qm-author-avatar-link {

    display: block;

    width: 56px;

    height: 56px;

    border-radius: 999px;

    overflow: hidden;

    border: 2px solid #e5e7eb;

    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.qm-author-avatar-link:hover {

    transform: translateY(-2px) scale(1.03);

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);

}



.qm-author-avatar-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.qm-author-follow-btn {

    width: 28px;

    height: 28px;

    border-radius: 999px;

    border: none;

    background: #ef4444;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(248, 113, 113, 0.7);

    font-size: 14px;

    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

    margin-top: -18px;

}



.qm-author-follow-btn:hover {

    background: #dc2626;

    transform: translateY(-1px) scale(1.02);

    box-shadow: 0 6px 16px rgba(248, 113, 113, 0.8);

}



.qm-author-follow-btn:active {

    transform: scale(0.96);

}



.qm-post-actions-float .qm-action-btn {

    width: 44px;

    height: 44px;

    padding: 0;

    border-radius: 999px;

    background: transparent;

    box-shadow: none;

    border: none;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--qm-text-muted);

    transition: transform 0.15s ease, color 0.15s ease;

}



.qm-post-actions-float .qm-action-btn:hover {

    transform: translateY(-2px);

}



.qm-post-actions-float .qm-action-btn:active {

    transform: translateY(0) scale(0.96);

}



.qm-post-actions-float .qm-action-btn i {

    font-size: 18px;

    margin-bottom: 2px;

    color: currentColor;

}



.qm-post-actions-float .qm-action-like {

    color: #f97373;

}



.qm-post-actions-float .qm-action-like.active,

.qm-post-actions-float .qm-action-like.liked {

    color: #ef4444;

}



.qm-post-actions-float .qm-action-collect {

    color: #f59e0b;

}



.qm-post-actions-float .qm-action-collect.active {

    color: #f97316;

}



.qm-post-actions-float .qm-action-share {

    color: #3b82f6;

}



.qm-post-actions-float .qm-action-btn {

    flex-direction: column;

}



.qm-post-actions-float .qm-action-count {

    font-size: 12px;

    line-height: 1.2;

    color: currentColor;

}



@media (max-width: 1024px) {

    .qm-article-sidebar,

    .qm-post-actions-float {

        display: none;

    }

}



/* Bootstrap lg断点 (≥992px) 响应式调整 */

@media (max-width: 991.98px) {

    .qm-article-hero-actions {

        flex-wrap: nowrap;

        gap: 8px;

        justify-content: center;

        padding-top: 20px;

    }

    

    .qm-download-btn {

        flex: 0 1 auto;

        min-width: auto;

        padding: 8px 16px;

        font-size: 13px;

    }

    

    .qm-download-btn i {

        font-size: 14px;

        margin-right: 4px;

    }

    

    .qm-download-btn-label {

        font-size: 13px;

    }

    

    .qm-download-btn-wrapper {

        flex: 0 1 auto;

    }

}





.qm-article-tags-row {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;

}



.qm-article-tag {

    display: inline-block;

    padding: 4px 12px;

    border-radius: 4px;

    font-size: 13px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s;

}



.qm-article-tag-category {

    background: rgba(37, 99, 235, 0.1);

    color: #2563eb;

    border: 1px solid rgba(37, 99, 235, 0.2);

}



.qm-article-tag-item {

    background: #f3f4f6;

    color: #6b7280;

    border: 1px solid #e5e7eb;

}



.qm-article-tag-item:hover {

    background: #e5e7eb;

    color: #374151;

}





.qm-article-title {

    font-size: 32px;

    font-weight: 700;

    line-height: 1.4;

    color: #111827;

    margin: 0 0 20px 0;

}





.qm-article-meta-info {

    display: flex;

    flex-wrap: wrap;

    gap: 16px 24px;

    margin-bottom: 24px;

    padding-bottom: 20px;

    border-bottom: 1px solid #e5e7eb;

    font-size: 14px;

    color: #6b7280;

}



.qm-meta-item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.qm-meta-item i {

    font-size: 14px;

    color: #9ca3af;

}



.qm-meta-item span {

    color: #6b7280;

}





.qm-article-summary {

    margin-bottom: 32px;

    padding: 20px;

    background: #f9fafb;

    border-radius: 8px;

    border: 1px solid #e5e7eb;

}



.qm-article-summary-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 12px;

    font-size: 15px;

    font-weight: 600;

    color: #111827;

    cursor: pointer;

}



.qm-article-summary-header i {

    font-size: 12px;

    color: #9ca3af;

    transition: transform 0.2s;

}



.qm-article-summary-content {

    font-size: 14px;

    line-height: 1.7;

    color: #4b5563;

}



.qm-article-summary-content p {

    margin: 0;

}





.qm-ai-summary-loading {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #6b7280;

    font-size: 14px;

    padding: 8px 0;

}



.qm-ai-summary-loading i {

    color: #2563eb;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



.qm-ai-summary-text {

    margin: 0;

    color: #4b5563;

    line-height: 1.7;

    min-height: 1.5em; 

}



.qm-article-excerpt-fallback {

    margin: 0;

    color: #4b5563;

    line-height: 1.7;

}





.qm-ai-summary-text::after {

    content: '|';

    color: #2563eb;

    animation: blink 1s infinite;

    margin-left: 2px;

}



.qm-ai-summary-text.typewriter-complete::after {

    display: none;

}



@keyframes blink {

    0%, 50% {

        opacity: 1;

    }

    51%, 100% {

        opacity: 0;

    }

}





.qm-download-modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    box-sizing: border-box;

}



.qm-download-modal-backdrop {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(2, 6, 23, 0.55);

    backdrop-filter: blur(10px) saturate(140%);

    -webkit-backdrop-filter: blur(10px) saturate(140%);

}



.qm-download-modal-content {

    position: relative;

    background: rgba(255, 255, 255, 0.98);

    border-radius: 16px;

    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);

    border: 1px solid rgba(229, 231, 235, 0.8);

    max-width: 560px;

    width: 100%;

    max-height: min(82vh, 760px);

    overflow: hidden;

    z-index: 1;

}



.qm-download-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 18px 20px;

    border-bottom: 1px solid rgba(229, 231, 235, 0.9);

    background: linear-gradient(180deg, rgba(249, 250, 251, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%);

}



.qm-download-modal-header h3 {

    margin: 0;

    font-size: 18px;

    font-weight: 700;

    color: #0f172a;

    letter-spacing: 0.2px;

}



.qm-download-modal-close {

    background: none;

    border: none;

    font-size: 20px;

    color: #6b7280;

    cursor: pointer;

    padding: 0;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    transition: all 0.2s;

}



.qm-download-modal-close:hover {

    background: rgba(15, 23, 42, 0.06);

    color: #0f172a;

}



.qm-download-modal-body {

    padding: 18px 20px 20px;

    overflow: auto;

    max-height: calc(min(82vh, 760px) - 64px);

}



.qm-download-options {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.qm-download-option {

    border: 1px solid rgba(226, 232, 240, 1);

    border-radius: 14px;

    padding: 14px;

    background: #ffffff;

    transition: all 0.2s;

}



.qm-download-option:hover {

    border-color: rgba(37, 99, 235, 0.45);

    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);

}



.qm-download-option-header {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

}



.qm-download-option-header i {

    font-size: 18px;

    color: #2563eb;

    width: 34px;

    height: 34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;

    background: rgba(37, 99, 235, 0.10);

}



.qm-download-option-header h4 {

    margin: 0;

    font-size: 16px;

    font-weight: 700;

    color: #0f172a;

    flex: 1;

}



.qm-vip-badge {

    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);

    color: #ffffff;

    padding: 4px 10px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 600;

}



.qm-download-option-content {

    margin-top: 10px;

}



.qm-download-option-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 16px;

    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

    color: #ffffff;

    border: none;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.2s;

    width: 100%;

    justify-content: center;

}



.qm-download-option-btn:hover {

    transform: translateY(-1px);

    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.30);

}



.qm-download-option-free .qm-download-option-btn {

    background: linear-gradient(135deg, #10b981 0%, #059669 100%);

}



.qm-download-option-free .qm-download-option-btn:hover {

    box-shadow: 0 14px 30px rgba(16, 185, 129, 0.25);

}





.qm-download-option-btn.qm-pan-btn {

    background: linear-gradient(135deg, #0f172a 0%, #1f2937 100%);

}

.qm-download-option-btn.qm-pan-btn:hover {

    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28);

}





.qm-download-option-btn.qm-pan-btn-baidu {

    background: linear-gradient(135deg, #1677ff 0%, #0ea5e9 100%);

}

.qm-download-option-btn.qm-pan-btn-baidu:hover {

    box-shadow: 0 14px 30px rgba(22, 119, 255, 0.30);

}





.qm-download-option-btn.qm-pan-btn-quark {

    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);

}

.qm-download-option-btn.qm-pan-btn-quark:hover {

    box-shadow: 0 14px 30px rgba(124, 58, 237, 0.28);

}





.qm-download-option-btn.qm-pan-btn-aliyun {

    background: linear-gradient(135deg, #ff6a00 0%, #ffb000 100%);

}

.qm-download-option-btn.qm-pan-btn-aliyun:hover {

    box-shadow: 0 14px 30px rgba(255, 106, 0, 0.25);

}





.qm-download-option-btn.qm-pan-btn-lanzou {

    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);

}

.qm-download-option-btn.qm-pan-btn-lanzou:hover {

    box-shadow: 0 14px 30px rgba(6, 182, 212, 0.25);

}



.qm-download-links-list {

    display: flex;

    flex-direction: column;

    gap: 14px;

}

.qm-download-link-item {

    display: flex;

    flex-direction: column;

    gap: 8px;

}

.qm-download-link-item .qm-download-option-btn {

    width: 100%;

}





.qm-download-tabs-wrap {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.qm-download-tabs {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}

.qm-download-tab {

    appearance: none;

    border: 1px solid rgba(203, 213, 225, 1);

    background: rgba(248, 250, 252, 1);

    color: #0f172a;

    font-size: 13px;

    font-weight: 700;

    padding: 8px 12px;

    border-radius: 999px;

    cursor: pointer;

    transition: all 0.2s ease;

}

.qm-download-tab:hover {

    border-color: rgba(37, 99, 235, 0.45);

}

.qm-download-tab.is-active {

    border-color: rgba(37, 99, 235, 0.6);

    background: rgba(37, 99, 235, 0.10);

    color: #1d4ed8;

}

.qm-download-tab-panels {

    display: block;

}

.qm-download-tab-panel {

    display: none;

}

.qm-download-tab-panel.is-active {

    display: block;

}

.dark .qm-download-tab {

    border-color: rgba(51, 65, 85, 0.85);

    background: rgba(2, 6, 23, 0.55);

    color: rgba(226, 232, 240, 0.92);

}

.dark .qm-download-tab.is-active {

    border-color: rgba(96, 165, 250, 0.7);

    background: rgba(59, 130, 246, 0.18);

    color: #93c5fd;

}



.qm-pan-link-wrapper,

.qm-pan-code-wrapper {

    display: flex;

    gap: 8px;

    margin-bottom: 12px;

    align-items: center;

}



.qm-pan-link-input,

.qm-pan-code-input {

    flex: 1;

    padding: 8px 12px;

    border: 1px solid rgba(203, 213, 225, 1);

    border-radius: 12px;

    font-size: 14px;

    background: rgba(248, 250, 252, 1);

}



.qm-pan-link-input-editable {

    background: #ffffff !important;

    cursor: text;

}



.qm-pan-link-input-editable:focus {

    border-color: #2563eb;

    outline: none;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);

}



.qm-pan-code-display {

    flex: 1;

    padding: 8px 12px;

    background: rgba(248, 250, 252, 1);

    border: 1px solid rgba(203, 213, 225, 1);

    border-radius: 12px;

    font-size: 14px;

    color: #374151;

    font-weight: 500;

    min-height: 38px;

    display: flex;

    align-items: center;

}



.qm-pan-code-wrapper label {

    font-size: 14px;

    color: #374151;

    font-weight: 500;

    min-width: 60px;

}



.qm-copy-btn {

    padding: 8px 16px;

    background: rgba(241, 245, 249, 1);

    border: 1px solid rgba(203, 213, 225, 1);

    border-radius: 12px;

    font-size: 13px;

    color: #374151;

    cursor: pointer;

    transition: all 0.2s;

    white-space: nowrap;

}



.qm-inline-copy-btn {

    position: absolute;

    top: 0.5rem;

    right: 0.5rem;

    padding: 4px 10px;

    font-size: 12px;

}



.qm-copy-btn:hover {

    background: rgba(226, 232, 240, 1);

    border-color: rgba(148, 163, 184, 1);

}





.qm-payment-methods {

    margin-top: 12px;

}



.qm-payment-methods-title {

    font-size: 14px;

    font-weight: 600;

    color: #374151;

    margin-bottom: 10px;

}



.qm-payment-methods-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.qm-payment-method-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 12px 20px;

    background: #ffffff;

    border: 1px solid rgba(203, 213, 225, 1);

    border-radius: 12px;

    font-size: 14px;

    font-weight: 600;

    color: #374151;

    cursor: pointer;

    transition: all 0.2s;

    width: 100%;

}



.qm-payment-method-btn:hover {

    background: rgba(248, 250, 252, 1);

    border-color: rgba(37, 99, 235, 0.45);

}



.qm-payment-method-btn i {

    font-size: 18px;

}



.qm-payment-method-btn[data-method="alipay"]:hover {

    border-color: #1677ff;

    color: #1677ff;

}



.qm-payment-method-btn[data-method="wechat"]:hover {

    border-color: #07c160;

    color: #07c160;

}



.qm-payment-method-btn[data-method="balance"]:hover {

    border-color: #f59e0b;

    color: #f59e0b;

}





body.qm-modal-open {

    overflow: hidden;

}





@media (max-width: 640px) {

    .qm-download-modal {

        padding: 14px;

    }

    .qm-download-modal-header {

        padding: 16px 16px;

    }

    .qm-download-modal-body {

        padding: 14px 16px 16px;

    }

    .qm-pan-link-wrapper,

    .qm-pan-code-wrapper {

        flex-direction: column;

        align-items: stretch;

    }

    .qm-pan-code-wrapper label {

        min-width: 0;

    }

    .qm-copy-btn {

        width: 100%;

        justify-content: center;

    }

}





.dark .qm-download-modal-content {

    background: rgba(2, 6, 23, 0.92);

    border-color: rgba(51, 65, 85, 0.8);

}

.dark .qm-download-modal-header {

    border-bottom-color: rgba(51, 65, 85, 0.8);

    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92) 0%, rgba(2, 6, 23, 0.92) 100%);

}

.dark .qm-download-modal-header h3 {

    color: #e5e7eb;

}

.dark .qm-download-modal-close {

    color: rgba(226, 232, 240, 0.75);

}

.dark .qm-download-modal-close:hover {

    background: rgba(226, 232, 240, 0.08);

    color: #e5e7eb;

}

.dark .qm-download-option {

    background: rgba(15, 23, 42, 0.7);

    border-color: rgba(51, 65, 85, 0.8);

}

.dark .qm-download-option-header h4 {

    color: #e5e7eb;

}

.dark .qm-pan-link-input,

.dark .qm-pan-code-display,

.dark .qm-payment-method-btn {

    background: rgba(2, 6, 23, 0.6);

    border-color: rgba(51, 65, 85, 0.85);

    color: #e5e7eb;

}

.dark .qm-copy-btn {

    background: rgba(30, 41, 59, 0.8);

    border-color: rgba(51, 65, 85, 0.85);

    color: rgba(226, 232, 240, 0.9);

}

.dark .qm-payment-methods-title,

.dark .qm-pan-code-wrapper label {

    color: rgba(226, 232, 240, 0.9);

}





.qm-article-body {

    margin-bottom: 32px;

}



.qm-article-content {

    font-size: 16px;

    line-height: 1.8;

    color: #374151;

    padding: 0;

}



/* Bootstrap响应式类覆盖 */

.qm-article-content.container-fluid {

    padding-left: 15px;

    padding-right: 15px;

}



.qm-article-content.px-3 {

    padding-left: 1rem !important;

    padding-right: 1rem !important;

}



.qm-article-content.px-md-4 {

    padding-left: 1.5rem !important;

    padding-right: 1.5rem !important;

}



.qm-article-content.px-lg-5 {

    padding-left: 3rem !important;

    padding-right: 3rem !important;

}



/* 确保文章内容在移动端有适当的内边距，不贴近边缘 */

@media (max-width: 767.98px) {

    .qm-article-content {

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    

    .qm-article-content.container-fluid {

        padding-left: 1rem !important;

        padding-right: 1rem !important;

    }

    

    /* 确保内容不会贴近容器边缘 */

    .qm-article-content > * {

        max-width: 100%;

    }

    

    .qm-article-content img,

    .qm-article-content iframe,

    .qm-article-content video {

        max-width: 100% !important;

        height: auto !important;

    }

    

    /* 确保表格等元素可以横向滚动 */

    .qm-article-content table {

        display: block;

        overflow-x: auto;

        width: 100%;

    }

}



@media (min-width: 768px) and (max-width: 991.98px) {

    .qm-article-content {

        padding-left: 1.5rem !important;

        padding-right: 1.5rem !important;

    }

}



@media (min-width: 992px) {

    .qm-article-content {

        padding-left: 3rem !important;

        padding-right: 3rem !important;

    }

}





.qm-article-comments-section {

    margin-top: 40px;

    padding-top: 32px;

    border-top: 1px solid #e5e7eb;

    max-width: 1200px;

    margin-left: auto;

}



/* Bootstrap响应式类覆盖 */

.qm-article-comments-section.container-fluid {

    padding-left: 15px;

    padding-right: 15px;

}



.qm-article-comments-section.px-3 {

    padding-left: 1rem !important;

    padding-right: 1rem !important;

}



.qm-article-comments-section.px-md-4 {

    padding-left: 1.5rem !important;

    padding-right: 1.5rem !important;

}



.qm-article-comments-section.px-lg-5 {

    padding-left: 3rem !important;

    padding-right: 3rem !important;

}



/* 移动端缩小评论区所有元素 */

@media (max-width: 767.98px) {

    .qm-article-comments-section {

        margin-top: 24px;

        padding-top: 20px;

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

    

    /* 移除评论项内边距 */

    .qm-comment-item,

    .qm-single-post-comments .qm-comment-item,

    .qm-single-post-comments li.comment {

        padding: 0 !important;

    }

    

    .qm-single-post-comments .qm-comment-body {

        padding: 0 !important;

    }

    

    /* 缩小评论标题 */

    .qm-comments-header {

        margin-bottom: 12px !important;

    }

    

    .qm-comments-title {

        font-size: 16px !important;

    }

    

    .qm-comments-title i {

        font-size: 14px !important;

    }

    

    .qm-comments-title span {

        font-size: 14px !important;

    }

    

    /* 缩小排序按钮 */

    .qm-comments-sort {

        gap: 4px !important;

    }

    

    .qm-sort-label {

        font-size: 12px !important;

    }

    

    .qm-comment-sort-btn {

        font-size: 12px !important;

        padding: 4px 8px !important;

    }

    

    /* 缩小评论表单 */

    .qm-comment-form {

        margin-bottom: 16px !important;

    }

    

    .qm-comment-input-wrapper {

        gap: 6px !important;

    }

    

    .qm-comment-attach-btn,

    .qm-comment-emoji-toggle,

    .qm-comment-send-btn {

        width: 32px !important;

        height: 32px !important;

        font-size: 14px !important;

    }

    

    .qm-comment-form textarea {

        font-size: 14px !important;

        padding: 8px 10px !important;

        min-height: 36px !important;

    }

    

    /* 缩小评论项 */

    .qm-comment-item {

        margin-bottom: 16px !important;

        padding: 0 !important;

    }

    

    .qm-comment-avatar {

        width: 36px !important;

        height: 36px !important;

    }

    

    .qm-comment-avatar img {

        width: 36px !important;

        height: 36px !important;

    }

    

    .qm-comment-author-name {

        font-size: 13px !important;

    }

    

    .qm-comment-level-badge {

        width: 28px !important;

        height: 28px !important;

    }

    

    .qm-comment-level-badge img {

        width: 28px !important;

        height: 28px !important;

    }

    

    .qm-comment-date {

        font-size: 11px !important;

    }

    

    .qm-comment-text {

        font-size: 14px !important;

        line-height: 1.6 !important;

    }

    

    .qm-comment-actions {

        gap: 8px !important;

        margin-top: 8px !important;

    }

    

    .qm-comment-reply-btn,

    .qm-comment-like-btn {

        font-size: 12px !important;

        padding: 4px 8px !important;

    }

    

    .qm-comment-like-btn i {

        font-size: 12px !important;

    }

    

    .qm-like-count {

        font-size: 11px !important;

    }

    

    /* 缩小快速回复按钮 */

    .qm-comment-quick-reply-btn {

        font-size: 11px !important;

        padding: 4px 8px !important;

        margin: 2px !important;

    }

}



.qm-comments-title {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 20px;

    font-weight: 600;

    color: #111827;

    margin-bottom: 24px;

}



.qm-comments-count {

    font-size: 14px;

    font-weight: 400;

    color: #6b7280;

}





@media (max-width: 1024px) {

    .qm-article-sticky-wrapper {

        top: 16px;

        max-width: calc(100% - 32px);

    }

    

    body.qm-header-fixed .qm-article-sticky-wrapper {

        top: calc(var(--qm-header-height, 60px) + 16px);

    }

    

    .qm-sticky-header-content {

        padding: 8px 20px;

    }

    

    .qm-sticky-header-title {

        font-size: 14px;

    }

    

    .qm-article-back-to-top {

        width: 28px;

        height: 28px;

        font-size: 12px;

    }

    

    .qm-article-hero-banner {

        min-height: auto;

        height: auto;

        padding: 30px 16px;

    }



    .qm-article-hero-content-wrapper {

        padding: 0;

    }



    .qm-article-hero-content-inner {

        padding: 24px 20px;

    }



    .qm-article-hero-main {

        flex-direction: column;

        gap: 24px;

        margin-bottom: 24px;

    }



    .qm-article-hero-left {

        width: 100%;

        text-align: center;

    }



    .qm-article-hero-right {

        width: 100%;

        display: flex;

        justify-content: center;

    }



    .qm-article-hero-thumbnail {

        width: 120px;

        height: 120px;

    }



    .qm-article-hero-title {

        font-size: 24px;

        margin-bottom: 16px;

    }



    .qm-article-hero-meta {

        gap: 12px 16px;

        font-size: 12px;

        margin-bottom: 16px;

        justify-content: center;

    }



    .qm-article-hero-tags {

        gap: 6px;

        justify-content: center;

    }



    .qm-article-hero-tag {

        padding: 4px 10px;

        font-size: 12px;

    }



    .qm-article-hero-actions {

        flex-direction: row;

        flex-wrap: nowrap;

        gap: 8px;

        justify-content: center;

    }



    .qm-article-hero-actions .qm-download-btn {

        width: auto;

        flex: 0 1 auto;

        padding: 8px 14px;

        font-size: 13px;

    }

    

    .qm-article-hero-actions .qm-download-btn i {

        font-size: 13px;

        margin-right: 4px;

    }

    

    .qm-article-hero-actions .qm-download-btn-label {

        font-size: 12px;

    }

    

    .qm-article-hero-actions .qm-download-btn-wrapper {

        flex: 0 1 auto;

    }



    .qm-article-detail-container {

        flex-direction: column;

        padding: 20px 15px 0;

    }

    

    /* 确保移动端容器与浏览器边缘保持距离 */

    .qm-article-detail-container.container {

        padding-left: 15px;

        padding-right: 15px;

    }



    .qm-article-sidebar {

        width: 100%;

    }



    .qm-article-main-content {

        padding: 20px 16px;

    }



    .qm-article-title {

        font-size: 24px;

    }

    

    .qm-sidebar-author-card,

    .qm-sidebar-author-posts {

        padding: 16px;

    }

}



@media (max-width: 640px) {

    .qm-article-hero-banner {

        min-height: auto;

        height: auto;

        padding: 30px 15px 20px;

    }



    .qm-article-hero-content-wrapper {

        padding: 0;

    }

    

    .qm-article-hero-content-wrapper.container {

        padding-left: 15px;

        padding-right: 15px;

    }



    .qm-article-hero-banner .qm-article-title {

        font-size: 22px;

        margin-bottom: 16px;

    }



    .qm-article-hero-banner .qm-article-meta-info {

        font-size: 12px;

        gap: 12px 16px;

    }

    

    .qm-article-hero-thumbnail:not(.qm-mockup-thumbnail) {

        width: 120px;

        height: 120px;

    }

    

    .qm-article-hero-thumbnail.qm-mockup-thumbnail {

        min-width: 120px;

        min-height: 120px;

        max-width: 150px;

        max-height: 150px;

    }

    

    .qm-article-hero-thumbnail .qm-mockup-image,

    .qm-article-hero-thumbnail .qm-mockup-frame {

        max-width: 150px;

    }



    .qm-article-main-content {

        padding: 20px 16px;

        margin: 0;

    }

    

    .qm-article-content {

        padding: 0;

    }

    

    /* 确保文章内容不会贴近边缘 */

    .qm-article-body {

        padding: 0;

    }

    

    /* 确保文章内容元素与容器边缘保持距离 */

    .qm-article-content p,

    .qm-article-content ul,

    .qm-article-content ol,

    .qm-article-content h1,

    .qm-article-content h2,

    .qm-article-content h3,

    .qm-article-content h4,

    .qm-article-content h5,

    .qm-article-content h6 {

        padding-left: 0;

        padding-right: 0;

        margin-left: 0;

        margin-right: 0;

    }



    .qm-article-comments-section {

        padding-left: 16px;

        padding-right: 16px;

    }



    .qm-article-title {

        font-size: 20px;

    }



    .qm-article-meta-info {

        font-size: 12px;

        gap: 12px 16px;

    }



    .qm-article-content {

        font-size: 15px;

        padding: 0;

    }

    

    /* 确保文章内容元素不会贴近边缘，保持适当间距 */

    .qm-article-content > *:first-child {

        margin-top: 0;

    }

    

    .qm-article-content > *:last-child {

        margin-bottom: 0;

    }

    

    /* 确保图片等元素不会超出容器 */

    .qm-article-content img {

        max-width: 100% !important;

        height: auto !important;

        display: block;

    }

    

    .qm-article-sticky-wrapper {

        top: 12px;

        max-width: calc(100% - 24px);

    }

    

    body.qm-header-fixed .qm-article-sticky-wrapper {

        top: calc(var(--qm-header-height, 60px) + 12px);

    }

    

    .qm-sticky-header-content {

        padding: 8px 16px;

    }

    

    .qm-sticky-header-title {

        font-size: 13px;

    }

    

    .qm-article-back-to-top {

        width: 26px;

        height: 26px;

        font-size: 11px;

    }

    

    .qm-sidebar-author-card,

    .qm-sidebar-author-posts {

        padding: 16px;

    }

    

    .qm-sidebar-author-avatar {

        width: 48px;

        height: 48px;

    }

    

    .qm-sidebar-author-name {

        font-size: 15px;

    }

    

    .qm-sidebar-author-desc {

        font-size: 12px;

    }

}





.qm-article-hero {

    position: relative;

    width: 100%;

    min-height: 400px;

    padding: 80px 0 60px;

    overflow: visible;

}



.qm-article-hero-wrapper {

    position: relative;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 40px;

    min-height: 380px;

    border-radius: 18px;

    overflow: hidden;

    

    background: linear-gradient(135deg, #e0e7ff 0%, #f5d0fe 45%, #fee2e2 100%);

    box-shadow: 0 18px 50px rgba(148, 163, 184, 0.35);

}



.qm-article-hero-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-image: 

        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);

    opacity: 0.3;

    z-index: 1;

}



.qm-article-hero-content {

    position: relative;

    z-index: 2;

    padding: 40px 32px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

}





.qm-article-hero-image {

    position: relative;

    flex-shrink: 0;

    width: 430px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.qm-hero-mockup-area {

    position: relative;

    width: 100%;

    aspect-ratio: 1200 / 960;

    overflow: visible;

}





.qm-hero-mockup-screen {

    position: absolute;

    left: 7.33%;

    top: 8.88%;

    width: 85.33%;

    height: 58.78%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-color: #1a1a2e;

    z-index: 0;

    border-radius: 4px;

    overflow: hidden;

}



.qm-hero-mockup-screen.qm-hero-mockup-placeholder {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.1);

    color: rgba(255, 255, 255, 0.8);

}



.qm-hero-mockup-placeholder i {

    font-size: 48px;

    margin-bottom: 12px;

    opacity: 0.7;

}



.qm-hero-mockup-placeholder span {

    font-size: 14px;

    font-weight: 500;

}





.qm-hero-mockup-frame {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    z-index: 1;

    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.3));

}



.qm-hero-image-decoration {

    display: none; 

}



.qm-hero-image-decoration::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 150px;

    height: 150px;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));

    border-radius: 50%;

}



@keyframes float {

    0%, 100% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-20px) rotate(5deg);

    }

}





.qm-article-hero-main {

    flex: 1;

    color: #111827;

}



.qm-article-breadcrumb--on-hero {

    margin-bottom: 12px;

    font-size: 13px;

    color: rgba(55, 65, 81, 0.75);

}



.qm-article-breadcrumb--on-hero a {

    color: #2563eb;

}



.qm-article-hero-title {

    font-size: 36px;

    font-weight: 800;

    line-height: 1.3;

    margin-bottom: 18px;

    color: #111827;

    letter-spacing: 0.02em;

    text-shadow: 0 1px 3px rgba(148, 163, 184, 0.5);

}



.qm-article-hero-tagline {

    margin-bottom: 18px;

}



.qm-hero-tagline-text {

    display: inline-block;

    padding: 6px 18px;

    background: rgba(255, 255, 255, 0.8);

    border-radius: 999px;

    font-size: 14px;

    font-weight: 500;

    color: #4b5563;

}



.qm-article-meta-row {

    display: flex;

    flex-wrap: wrap;

    gap: 10px 18px;

    font-size: 13px;

    color: rgba(55, 65, 81, 0.85);

    margin-bottom: 18px;

}



.qm-article-meta-row span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.qm-article-meta-row i {

    font-size: 13px;

}



.qm-article-hero-actions-row {

    display: flex;

    align-items: center;

    gap: 24px;

    margin-bottom: 18px;

}



.qm-article-price-box {

    display: flex;

    align-items: baseline;

    gap: 8px;

    color: #111827;

}



.qm-article-price-label {

    font-size: 13px;

    opacity: 0.8;

}



.qm-article-price-value {

    font-size: 30px;

    font-weight: 700;

}



.qm-article-price-unit {

    font-size: 14px;

    margin-left: 2px;

}



.qm-article-price-tip {

    font-size: 12px;

    opacity: 0.8;

}



.qm-article-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.qm-hero-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 20px;

    border-radius: 999px;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    border: none;

    cursor: pointer;

    transition: all 0.2s;

    color: #fff;

}



.qm-hero-btn i {

    font-size: 14px;

}



.qm-hero-btn--primary {

    background: #f97316;

    box-shadow: 0 10px 25px rgba(248, 113, 113, 0.4);

}



.qm-hero-btn--primary:hover {

    background: #ea580c;

    transform: translateY(-1px);

}



.qm-hero-btn--secondary {

    background: rgba(15, 23, 42, 0.3);

    border: 1px solid rgba(248, 250, 252, 0.4);

}



.qm-hero-btn--secondary:hover {

    background: rgba(15, 23, 42, 0.45);

}



.qm-hero-btn--outline {

    background: transparent;

    border: 1px solid rgba(248, 250, 252, 0.5);

}



.qm-hero-btn--outline:hover {

    background: rgba(15, 23, 42, 0.3);

}



.qm-article-hero-description {

    font-size: 14px;

    line-height: 1.9;

    color: #4b5563;

    max-width: 520px;

    margin-bottom: 18px;

}





.qm-article-hero-stats {

    position: fixed;

    right: 32px;

    top: 40%;

    transform: translateY(-50%);

    z-index: 50;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 16px;

}



.qm-hero-stat-avatar {

    width: 56px;

    height: 56px;

    border-radius: 999px;

    border: 2px solid #ffffff;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);

    overflow: visible; 

    background: #e5e7eb;

    position: relative;

    margin-bottom: 26px;

}



.qm-hero-stat-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%; 

}



.qm-hero-stat-follow {

    position: absolute;

    left: 50%;

    bottom: -10px; 

    transform: translateX(-50%);

    width: 26px;

    height: 26px;

    border-radius: 999px;

    border: 2px solid #ffffff;

    background: linear-gradient(135deg, #fb7185, #f97316);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    box-shadow: 0 10px 25px rgba(248, 113, 113, 0.5);

    transition: transform 0.15s ease, box-shadow 0.15s ease;

}



.qm-hero-stat-follow:hover {

    transform: translateX(-50%) translateY(-1px) scale(1.03);

    box-shadow: 0 14px 30px rgba(248, 113, 113, 0.6);

}



.qm-hero-stat-item {

    width: auto;

    padding: 4px 0;

    border-radius: 0;

    background: transparent; 

    box-shadow: none;

    border: none;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 2px;

    cursor: pointer;

    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;

}



.qm-hero-stat-item:hover {

    transform: translateY(-2px);

    box-shadow: none;

    background: transparent;

}



.qm-hero-stat-number {

    font-size: 11px;

    color: #4b5563;

}





@media (max-width: 992px) {

    .qm-article-hero-stats {

        display: none;

    }

}



.qm-hero-stat-item i {

    font-size: 13px;

    color: #6b7280; 

}





.qm-hero-stat-like i {

    background-image: linear-gradient(135deg, #fb7185, #f97316);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}





.qm-hero-stat-like.active i {

    background-image: none;   

    color: #ef4444;           

    transform: scale(1.3);

    filter: drop-shadow(0 0 6px rgba(248, 113, 113, 0.8));

}





.qm-hero-stat-comment i {

    background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}





.qm-hero-stat-fav i {

    background-image: linear-gradient(135deg, #facc15, #f97316);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}





.qm-hero-stat-fav.active i {

    background-image: none;

    color: #f97316;

    transform: scale(1.25);

    filter: drop-shadow(0 0 5px rgba(251, 146, 60, 0.8));

}





.qm-hero-stat-share i {

    background-image: linear-gradient(135deg, #22c55e, #06b6d4);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}





.qm-article-content-wrapper {

    background: white;

    padding: 32px 0 50px;

}



.qm-article-content-container {

    max-width: 900px;

    margin: 0 auto;

    padding: 0 20px;

}





@media (max-width: 768px) {

    .qm-post-tabs {

        display: flex;

        max-width: 100%;

        padding: 4px 6px;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

        border-radius: 999px;

        box-shadow: 0 8px 20px rgba(129, 140, 248, 0.2);

    }



    .qm-post-tabs::-webkit-scrollbar {

        display: none;

    }



    .qm-tab-btn {

        flex: 0 0 auto;

        padding: 6px 14px;

        font-size: 13px;

        white-space: nowrap;

    }



    .qm-article-content-container {

        max-width: 100%;

        padding: 0;

    }

}







.qm-post-tabs {

    display: inline-flex;

    padding: 4px;

    background: #f3f4ff;

    border-radius: 999px;

    margin-bottom: 24px;

    gap: 4px;

    box-shadow: 0 8px 20px rgba(129, 140, 248, 0.25);

}



.qm-tab-btn {

    position: relative;

    border: none;

    background: transparent;

    padding: 8px 18px;

    font-size: 13px;

    color: #6b7280;

    cursor: pointer;

    border-radius: 999px;

    transition: all 0.18s ease;

}



.qm-tab-btn.active {

    background: linear-gradient(135deg, #6366f1, #ec4899);

    color: #ffffff;

    font-weight: 600;

    box-shadow: 0 6px 16px rgba(129, 140, 248, 0.5);

    transform: translateY(-1px);

}



.qm-tab-btn.active::before {

    content: '';

    position: absolute;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

    width: 6px;

    height: 6px;

    border-radius: 999px;

    background: #ffffff;

}



.qm-tab-content {

    display: none;

}



.qm-tab-content.active {

    display: block;

}





.qm-article-breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 30px;

    font-size: 14px;

    color: #666;

}



.qm-article-breadcrumb a {

    color: #3b82f6;

    text-decoration: none;

    transition: color 0.2s;

}



.qm-article-breadcrumb a:hover {

    color: #2563eb;

}



.qm-breadcrumb-sep {

    color: #999;

}



.qm-breadcrumb-current {

    color: #333;

    font-weight: 500;

}





.qm-article-author-section {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px 20px;

    margin-bottom: 28px;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

    background: #f9fafb;

}





.qm-article-hero-author {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 14px;

    margin-bottom: 16px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.9);

    box-shadow: 0 10px 25px rgba(148, 163, 184, 0.45);

}



.qm-article-hero-author .qm-author-avatar {

    width: 48px;

    height: 48px;

    border-width: 2px;

}



.qm-article-hero-author .qm-author-name {

    font-size: 18px;

}



.qm-article-hero-author .qm-author-update-time {

    font-size: 12px;

}



.qm-article-hero-author .qm-author-actions {

    gap: 10px;

}



.qm-author-info {

    display: flex;

    align-items: center;

    gap: 15px;

}



.qm-author-avatar {

    position: relative;

    width: 64px;

    height: 64px;

    border-radius: 50%;

    overflow: visible;

    background: #e5e7eb;

    flex-shrink: 0;

    border: 3px solid #60a5fa;

    padding: 2px;

}



.qm-author-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}





.qm-author-details {

    flex: 1;

}



.qm-author-name-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;

    flex-wrap: wrap;

}



.qm-author-name {

    font-size: 20px;

    font-weight: 700;

    color: #000;

    text-decoration: none;

    transition: color 0.2s;

    letter-spacing: 0.5px;

    line-height: 1;

    display: inline-flex;

    align-items: center;

    height: 28px;

}



.qm-author-name:hover {

    color: #3b82f6;

}





.qm-author-name-row .qm-level-badge-inline {

    flex-shrink: 0;

    margin-left: 0;

    display: inline-block;

    vertical-align: middle;

}







.qm-author-update-time {

    font-size: 13px;

    color: #6b7280;

    margin-top: 4px;

}



.qm-author-bio {

    margin-top: 6px;

    font-size: 13px;

    color: #6b7280;

}



.qm-author-actions {

    display: flex;

    gap: 12px;

}



.qm-author-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    border: 1px solid #e5e7eb;

    border-radius: 10px;

    background: white;

    color: #374151;

    font-size: 14px;

    font-weight: 500;

    cursor: pointer;

    transition: all 0.2s;

    min-width: 90px;

    justify-content: center;

}



.qm-author-btn:hover {

    border-color: #3b82f6;

    color: #3b82f6;

    background: #eff6ff;

    transform: translateY(-1px);

    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);

}



.qm-author-btn.qm-author-follow:hover {

    border-color: #ec4899;

    color: #ec4899;

    background: #fdf2f8;

    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.15);

}



.qm-author-btn i {

    font-size: 16px;

}





.qm-article-body {

    margin-bottom: 36px;

}



.qm-article-content {

    font-size: 16px;

    line-height: 1.8;

    color: #374151;

}





.qm-article-body-title {

    display: none;

    margin-bottom: 18px;

}



.qm-article-content h1,

.qm-article-content h2,

.qm-article-content h3,

.qm-article-content h4,

.qm-article-content h5,

.qm-article-content h6 {

    margin-top: 32px;

    margin-bottom: 16px;

    font-weight: 700;

    color: #1f2937;

    line-height: 1.4;

}



.qm-article-content h2 {

    font-size: 28px;

    border-bottom: 2px solid #e5e7eb;

    padding-bottom: 10px;

}



.qm-article-content h3 {

    font-size: 24px;

}



.qm-article-content p {

    margin-bottom: 16px;

}



.qm-article-content ul,

.qm-article-content ol {

    margin-bottom: 16px;

    padding-left: 24px;

}



.qm-article-content li {

    margin-bottom: 8px;

}



.qm-article-content img {

    max-width: 100%;

    height: auto;

    border-radius: 8px;

    margin: 24px 0;

    display: block;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



/* 视频容器样式 */

.qm-article-content .qm-video-wrapper {

    position: relative;

    max-width: 100%;

    margin: 24px 0;

}



.qm-article-content .qm-video-wrapper video {

    max-width: 100%;

    width: 100%;

    height: auto;

    max-height: 500px;

    border-radius: 8px;

    display: block;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.qm-article-content .qm-video-wrapper iframe {

    max-width: 100%;

    width: 100%;

    aspect-ratio: 16 / 9;

    border-radius: 8px;

    border: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



.qm-article-content video {

    max-width: 100%;

    width: 100%;

    height: auto;

    max-height: 500px;

    border-radius: 8px;

    margin: 24px 0;

    display: block;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}





.qm-article-content img:not(.qm-hero-mockup-frame) {

    border: none;

    background: transparent;

}



.qm-article-content blockquote {

    margin: 24px 0;

    padding: 16px 20px;

    background: #f9fafb;

    border-left: 4px solid #3b82f6;

    border-radius: 4px;

    color: #6b7280;

    font-style: italic;

}



.qm-article-content code {

    padding: 2px 6px;

    background: #f3f4f6;

    border-radius: 4px;

    font-family: 'Courier New', monospace;

    font-size: 14px;

    color: #dc2626;

}



.qm-article-content pre {

    margin: 24px 0;

    padding: 16px;

    background: #1f2937;

    border-radius: 8px;

    overflow-x: auto;

}



.qm-article-content pre code {

    background: transparent;

    color: #e5e7eb;

    padding: 0;

}





.qm-article-actions {

    display: flex;

    gap: 16px;

    margin: 40px 0;

    padding: 24px;

    background: #f9fafb;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

}



.qm-action-btn {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 24px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 500;

    text-decoration: none;

    transition: all 0.2s;

    flex: 1;

    justify-content: center;

}



.qm-action-download {

    background: linear-gradient(135deg, #3b82f6, #2563eb);

    color: white;

    border: none;

}



.qm-action-download:hover {

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);

}



.qm-action-preview {

    background: linear-gradient(135deg, #10b981, #059669);

    color: white;

    border: none;

}



.qm-action-preview:hover {

    background: linear-gradient(135deg, #059669, #047857);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);

}



.qm-action-vip {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: white;

    border: none;

}



.qm-action-vip:hover {

    background: linear-gradient(135deg, #d97706, #b45309);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);

}



.qm-action-share {

    background: transparent;

    color: #3b82f6;

    border: none;

}



.qm-action-share:hover {

    color: #1d4ed8;

    box-shadow: none;

}





.qm-article-tags {

    margin: 40px 0;

    padding: 24px;

    background: #f9fafb;

    border-radius: 12px;

    border: 1px solid #e5e7eb;

}



.qm-tags-header {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    font-size: 16px;

    font-weight: 600;

    color: #1f2937;

}



.qm-tags-header i {

    color: #3b82f6;

}



.qm-tags-list {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.qm-tag-item {

    display: inline-block;

    padding: 6px 14px;

    background: white;

    border: 1px solid #e5e7eb;

    border-radius: 6px;

    font-size: 14px;

    color: #374151;

    text-decoration: none;

    transition: all 0.2s;

}



.qm-tag-item:hover {

    border-color: #3b82f6;

    color: #3b82f6;

    background: #eff6ff;

}





.qm-article-related {

    margin: 40px 0;

}



.qm-related-title {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    font-size: 22px;

    font-weight: 700;

    color: #1f2937;

}



.qm-related-title i {

    color: #3b82f6;

}



.qm-related-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

}



.qm-related-item {

    position: relative;

    display: block;

    height: 220px;

    border-radius: 18px;

    overflow: hidden;

    text-decoration: none;

    background-size: cover;

    background-position: center;

    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.35);

    transform: translateY(0);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.qm-related-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.25) 55%, transparent 100%);

}



.qm-related-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.45);

}



.qm-related-date-badge {

    position: absolute;

    top: 10px;

    left: 10px;

    width: 64px;

    border-radius: 12px;

    background: rgba(248, 250, 252, 0.95);

    color: #111827;

    text-align: center;

    padding: 4px 0 6px;

    font-size: 11px;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);

}



.qm-related-date-top {

    font-weight: 700;

    font-size: 12px;

}



.qm-related-date-mid {

    margin: 2px 0;

    color: #6b7280;

}



.qm-related-date-bottom {

    font-size: 10px;

    color: #111827;

}



.qm-related-item-title-wrap {

    position: absolute;

    left: 14px;

    right: 14px;

    bottom: 14px;

    z-index: 2;

}



.qm-related-item-title {

    font-size: 14px;

    font-weight: 600;

    color: #f9fafb;

    line-height: 1.5;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}







.qm-share-poster-modal {

    position: fixed;

    inset: 0;

    z-index: 60;

}



.qm-share-poster-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, 0.45);

    backdrop-filter: blur(6px);

}



.qm-share-poster-dialog {

    position: absolute;

    inset: 0;

    margin: auto;

    max-width: 900px;

    max-height: 90vh;

    background: #f9fafb;

    border-radius: 18px;

    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.45);

    padding: 20px 24px 18px;

    display: flex;

    flex-direction: column;

}



.qm-share-poster-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

}



.qm-share-poster-header h3 {

    font-size: 16px;

    font-weight: 600;

    color: #111827;

}



.qm-share-poster-close {

    border: none;

    background: transparent;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

}



.qm-share-poster-close:hover {

    color: #111827;

}



.qm-share-poster-tabs {

    display: inline-flex;

    padding: 4px;

    background: #e5e7eb;

    border-radius: 999px;

    margin-bottom: 14px;

    gap: 4px;

}



.qm-share-poster-tab {

    border: none;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: 13px;

    background: transparent;

    color: #4b5563;

    cursor: pointer;

}



.qm-share-poster-tab.is-active {

    background: #ffffff;

    color: #1d4ed8;

    box-shadow: 0 4px 10px rgba(148, 163, 184, 0.5);

}



.qm-share-poster-body {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: auto;

    padding: 8px 0 10px;

}



.qm-share-poster {

    display: none;

    width: 320px;

    height: 540px;

    border-radius: 18px;

    background: linear-gradient(135deg, #ffffff, #f9fafb);

    box-shadow: 0 18px 40px rgba(148, 163, 184, 0.4);

    overflow: hidden;

    position: relative;

}



.qm-share-poster.is-active {

    display: block;

}



.qm-share-poster-cover {

    height: 54%;

    background-size: cover;

    background-position: center;

}



.qm-share-poster-content {

    padding: 16px 18px 14px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    height: 46%;

}



.qm-share-poster-tagline span {

    display: inline-block;

    padding: 3px 10px;

    font-size: 11px;

    border-radius: 999px;

    background: rgba(59, 130, 246, 0.1);

    color: #1d4ed8;

}



.qm-share-poster-title {

    font-size: 16px;

    font-weight: 700;

    color: #111827;

    margin: 8px 0 6px;

    line-height: 1.35;

}



.qm-share-poster-desc {

    font-size: 12px;

    color: #4b5563;

    line-height: 1.6;

    margin-bottom: 6px;

}



.qm-share-poster-footer {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 10px;

}



.qm-share-poster-meta {

    display: flex;

    flex-direction: column;

    gap: 3px;

    font-size: 11px;

    color: #6b7280;

}



.qm-share-poster-qr,

.qm-share-poster-qr-small {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 4px;

}



.qm-share-poster-qr img,

.qm-share-poster-qr-small img {

    width: 82px;

    height: 82px;

    border-radius: 12px;

    background: #ffffff;

    padding: 4px;

}



.qm-share-poster-qr span {

    font-size: 11px;

    color: #6b7280;

}





.qm-share-poster-row {

    display: flex;

    height: 100%;

}



.qm-share-poster-row-left {

    width: 48%;

    background-size: cover;

    background-position: center;

}



.qm-share-poster-row-right {

    width: 52%;

    padding: 16px 14px 14px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}





#qm-poster-2 {

    background: radial-gradient(circle at top, #6366f1 0%, #7c3aed 35%, #4c1d95 100%);

    color: #f9fafb;

}



.qm-poster2-inner {

    position: relative;

    margin: 14px 12px 14px;

    min-height: 100%;

    background: #ffffff;

    border-radius: 18px;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);

    padding: 18px 18px 16px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.qm-poster2-tagbar {

    text-align: center;

    margin-bottom: 10px;

}



.qm-poster2-tag {

    display: inline-block;

    padding: 4px 16px;

    border-radius: 999px;

    font-size: 11px;

    background: #f5f3ff;

    color: #2563eb;

    border: 1px solid #e0e7ff;

}



.qm-poster2-title {

    font-size: 20px;

    font-weight: 800;

    text-align: center;

    color: #111827;

    letter-spacing: 0.03em;

    margin-bottom: 4px;

}



.qm-poster2-subtitle {

    font-size: 12px;

    text-align: center;

    color: #6b7280;

    margin-bottom: 10px;

}



.qm-poster2-time {

    font-size: 11px;

    text-align: center;

    color: #6b7280;

    margin-bottom: 12px;

}



.qm-poster2-feature-card {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 10px;

    border-radius: 12px;

    background: #f5f3ff;

    margin-bottom: 10px;

}



.qm-poster2-avatar {

    width: 38px;

    height: 38px;

    border-radius: 999px;

    overflow: hidden;

    border: 2px solid #3b82f6;

}



.qm-poster2-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.qm-poster2-feature-text p {

    font-size: 11px;

    color: #4b5563;

    margin: 0;

}



.qm-poster2-points {

    background: #f9fafb;

    border-radius: 14px;

    padding: 8px 10px 6px;

    margin-bottom: 8px;

}



.qm-poster2-points-header {

    font-size: 11px;

    font-weight: 600;

    color: #4b5563;

    margin-bottom: 6px;

}



.qm-poster2-points-list {

    padding-left: 16px;

    margin: 0;

}



.qm-poster2-points-list li {

    font-size: 11px;

    color: #6b7280;

    margin-bottom: 3px;

}



.qm-poster2-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    background: #4f46e5;

    border-radius: 14px;

    padding: 10px 12px;

    color: #e5e7eb;

}



.qm-poster2-price-label {

    font-size: 11px;

    opacity: 0.85;

}



.qm-poster2-price-value {

    font-size: 18px;

    font-weight: 800;

}



.qm-poster2-price-value span {

    font-size: 12px;

    margin-left: 2px;

}



.qm-poster2-price-tip {

    font-size: 10px;

    margin-top: 2px;

    opacity: 0.9;

}



.qm-poster2-bottom-right img {

    width: 72px;

    height: 72px;

    border-radius: 10px;

    background: #ffffff;

    padding: 4px;

}



.qm-poster2-bottom-right span {

    display: block;

    margin-top: 2px;

    font-size: 10px;

}



.qm-share-poster-simple {

    padding: 16px 18px 18px;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}





#qm-poster-3 {

    background: #f97316;

    background-image: linear-gradient(180deg, #fde68a 0%, #f97316 60%, #7c2d12 100%);

}



.qm-poster3-inner {

    margin: 14px 14px 16px;

    background: #fff7ed;

    border-radius: 18px;

    padding: 14px 14px 12px;

    display: flex;

    flex-direction: column;

    height: calc(100% - 30px);

    box-shadow: 0 18px 40px rgba(124, 45, 18, 0.45);

}



.qm-poster3-calendar {

    border-bottom: 1px solid #fed7aa;

    padding-bottom: 6px;

    margin-bottom: 8px;

}



.qm-poster3-week {

    display: flex;

    justify-content: space-between;

    font-size: 9px;

    color: #9a3412;

    margin-bottom: 4px;

}



.qm-poster3-week .is-active {

    font-weight: 700;

    color: #b91c1c;

}



.qm-poster3-date-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.qm-poster3-side-text {

    display: flex;

    flex-direction: column;

    font-size: 10px;

    color: #9a3412;

}



.qm-poster3-day {

    font-size: 40px;

    font-weight: 800;

    color: #b91c1c;

}



.qm-poster3-photo {

    margin: 10px 0 8px;

    height: 180px;

    border-radius: 12px;

    background-size: cover;

    background-position: center;

    overflow: hidden;

}



.qm-poster3-quote-label {

    display: inline-block;

    margin: 4px auto;

    padding: 3px 14px;

    font-size: 11px;

    border-radius: 999px;

    background: #fed7aa;

    color: #9a3412;

}



.qm-poster3-quote-text {

    font-size: 12px;

    color: #7c2d12;

    line-height: 1.7;

    margin: 4px 0 8px;

    text-align: left;

}



.qm-poster3-footer {

    margin-top: auto;

    padding-top: 6px;

    border-top: 1px solid #fed7aa;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 10px;

}



.qm-poster3-actions {

    display: flex;

    flex-direction: column;

    gap: 2px;

    font-size: 10px;

    color: #9a3412;

}



.qm-poster3-qr {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;

}



.qm-poster3-qr img {

    width: 74px;

    height: 74px;

    background: #fff;

    border-radius: 10px;

    padding: 4px;

}



.qm-poster3-qr span {

    font-size: 10px;

    color: #7c2d12;

}



.qm-share-poster-simple-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;

}



.qm-share-poster-badge {

    font-size: 11px;

    padding: 3px 10px;

    border-radius: 999px;

    background: linear-gradient(135deg, #4f46e5, #ec4899);

    color: #ffffff;

}



.qm-share-poster-simple-date {

    font-size: 11px;

    color: #6b7280;

}



.qm-share-poster-simple-footer {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

}



.qm-share-poster-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 8px;

}



.qm-share-save,

.qm-share-copy-link {

    border: none;

    border-radius: 999px;

    padding: 8px 16px;

    font-size: 13px;

    font-weight: 500;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    cursor: pointer;

}



.qm-share-save {

    background: #111827;

    color: #ffffff;

}



.qm-share-copy-link {

    background: #ffffff;

    color: #1f2937;

    border: 1px solid #e5e7eb;

}



.qm-share-copy-link:hover {

    border-color: #3b82f6;

    color: #1d4ed8;

}



@media (max-width: 768px) {

    .qm-share-poster-dialog {

        max-width: 100%;

        max-height: 100vh;

        border-radius: 0;

    }

}





.dark .qm-article-detail {

    background: #020617;

}



/* 暗色模式确保背景延伸到页脚 */

.dark main.qm-article-detail {

    background: #020617;

    min-height: 100vh;

}



.dark .qm-article-content-wrapper {

    background: #020617;

}



.dark .qm-article-breadcrumb {

    color: #9ca3af;

}



.dark .qm-article-breadcrumb a {

    color: #60a5fa;

}



.dark .qm-breadcrumb-current {

    color: #f3f4f6;

}



.dark .qm-article-author-section {

    border-color: #1f2937;

    background: #020617;

}



.dark .qm-author-name {

    color: #f3f4f6;

}



.dark .qm-author-avatar {

    border-color: #3b82f6;

}



.dark .qm-author-update-time {

    color: #9ca3af;

}



.dark .qm-author-btn {

    background: #374151;

    border-color: #4b5563;

    color: #d1d5db;

}



.dark .qm-author-btn:hover {

    background: #4b5563;

    border-color: #60a5fa;

    color: #60a5fa;

}



.dark .qm-article-content {

    color: #d1d5db;

}



.dark .qm-article-content h1,

.dark .qm-article-content h2,

.dark .qm-article-content h3,

.dark .qm-article-content h4,

.dark .qm-article-content h5,

.dark .qm-article-content h6 {

    color: #f3f4f6;

}



.dark .qm-article-content h2 {

    border-bottom-color: #374151;

}



.dark .qm-article-content blockquote {

    background: #374151;

    color: #9ca3af;

}



.dark .qm-article-content code {

    background: #374151;

    color: #fca5a5;

}



.dark .qm-article-content pre {

    background: #111827;

}



.dark .qm-article-actions {

    background: #374151;

    border-color: #4b5563;

}



.dark .qm-article-tags {

    background: #374151;

    border-color: #4b5563;

}



.dark .qm-tags-header {

    color: #f3f4f6;

}



.dark .qm-tag-item {

    background: #4b5563;

    border-color: #6b7280;

    color: #d1d5db;

}



.dark .qm-tag-item:hover {

    border-color: #60a5fa;

    color: #60a5fa;

    background: #1e3a8a;

}



.dark .qm-related-title {

    color: #f3f4f6;

}



.dark .qm-related-item {

    background: #374151;

    border-color: #4b5563;

}



.dark .qm-related-item:hover {

    border-color: #60a5fa;

}



.dark .qm-related-thumb {

    background: #4b5563;

}



.dark .qm-related-item-title {

    color: #f3f4f6;

}







@media (max-width: 1200px) {

    .qm-article-hero {

        overflow-x: hidden;

    }



    .qm-article-hero-wrapper {

        max-width: 100%;

        margin: 0 auto;

        padding: 0 16px;

    }



    .qm-article-hero-content {

        padding: 24px 18px;

        gap: 26px;

    }



    .qm-article-hero-image {

        width: min(36vw, 320px);

    }



    .qm-article-hero-title {

        font-size: clamp(20px, 2.3vw, 26px);

        margin-bottom: 14px;

    }



    .qm-article-hero-tagline {

        margin-bottom: 12px;

    }



    .qm-hero-tagline-text {

        font-size: 12px;

        padding: 4px 12px;

    }



    .qm-article-meta-row {

        font-size: 12px;

        margin-bottom: 12px;

    }



    .qm-article-price-value {

        font-size: 22px;

    }



    .qm-article-price-unit {

        font-size: 11px;

    }



    .qm-article-price-tip {

        font-size: 11px;

    }



    .qm-hero-btn {

        font-size: 12px;

        padding: 8px 14px;

    }



    .qm-article-hero-description {

        font-size: 12px;

        line-height: 1.8;

    }

    .qm-author-actions {

        width: 100%;

        display: flex;

        gap: 10px;

    }

    

    .qm-author-btn {

        flex: 1;

        padding: 10px 16px;

        font-size: 13px;

    }

    

    .qm-article-content {

        font-size: 15px;

        line-height: 1.7;

    }

    

    .qm-article-content h2 {

        font-size: 22px;

        margin-top: 24px;

    }

    

    .qm-article-content h3 {

        font-size: 20px;

    }

    

    .qm-article-actions {

        flex-direction: column;

        padding: 20px;

        gap: 12px;

    }

    

    .qm-action-btn {

        padding: 12px 20px;

        font-size: 14px;

    }

    

    .qm-article-tags {

        padding: 20px;

    }

    

    .qm-tags-header {

        font-size: 15px;

        margin-bottom: 12px;

    }

    

    .qm-tag-item {

        font-size: 13px;

        padding: 5px 12px;

    }

    

    .qm-related-title {

        font-size: 20px;

        margin-bottom: 20px;

    }

    

    .qm-related-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }

    

    .qm-related-thumb {

        height: 120px;

    }

}





@media (max-width: 640px) {

    .qm-article-hero {

        min-height: auto;

        padding-top: 16px;

        padding-bottom: 18px;

    }



    .qm-article-hero-wrapper {

        min-height: auto;

    }



    .qm-article-hero-content {

        padding: 18px 10px;

        gap: 16px;

    }



    .qm-article-hero-title {

        font-size: 18px;

        display: none; 

    }



    

    .qm-article-body-title {

        display: block;

        font-size: 18px;

        font-weight: 800;

        line-height: 1.3;

        letter-spacing: 0;

        color: #111827;

        margin-bottom: 14px;

        

    }



    

    .qm-article-meta-row {

        display: none;

    }



    

    .qm-article-hero-actions-row {

        flex-direction: column-reverse;

        align-items: flex-start;

        gap: 14px;

        margin-bottom: 0;

    }



    .qm-article-price-box {

        width: 100%;

        justify-content: flex-start;

    }



    

    .qm-article-hero-tagline,

    .qm-hero-tagline-text {

        font-size: 12px;

        display: none;

    }



    .qm-article-meta-row {

        font-size: 11px;

        gap: 8px 12px;

    }



    .qm-article-price-value {

        font-size: 20px;

    }



    .qm-article-price-unit {

        font-size: 11px;

    }



    .qm-hero-btn {

        font-size: 12px;

        padding: 8px 14px;

    }



    

    .qm-article-hero-description {

        font-size: 12px;

        display: none;

    }



    

    .qm-single-post-comments .qm-comment-item .qm-comment-item {

        margin-left: 0 !important;

        padding-left: 0 !important;

    }



    .qm-single-post-comments .qm-comment-body {

        width: 100% !important;

        box-sizing: border-box;

        padding: 0 !important;

    }



    

    .qm-single-post-comments .qm-comment-header {

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        gap: 8px;

    }



    .qm-single-post-comments .qm-comment-author-block {

        display: flex;

        flex-direction: column;

        gap: 2px;

    }



    

    #comments.qm-single-post-comments {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

}







.qm-single-post-comments .qm-comment-author-name,

.qm-single-post-comments .qm-comment-date {

    background: transparent !important;

}

.qm-single-post-comments .qm-vip-badge,

.qm-single-post-comments .qm-vip-badge-inline {

    background: transparent !important;

    padding: 0 !important;

    border-radius: 0 !important;

    color: inherit !important;

}



.qm-single-post-comments .qm-comment-meta {

    position: relative;

}

@media (max-width: 767.98px) {
    .qm-single-post-comments .qm-comment-author {
        flex-wrap: wrap !important;
        gap: 2px !important;
    }

    .qm-single-post-comments .qm-comment-author-name {
        flex: 0 1 auto !important;
        min-width: 0;
    }

    .qm-single-post-comments .qm-vip-badge,
    .qm-single-post-comments .qm-vip-badge-inline {
        background: transparent;
        padding: 0;
        border-radius: 0;
        color: inherit;
        width: var(--qm-vip-badge-size, 18px);
        height: var(--qm-vip-badge-size, 18px);
        object-fit: contain;
        display: inline-block;
        flex: 0 0 auto;
        flex-shrink: 0;
    }

    .qm-single-post-comments .qm-vip-badge-inline {
        margin-left: 0;
    }

    .qm-single-post-comments .qm-comment-level-badge {
        background: transparent;
        padding: 0;
        border-radius: 0;
        flex: 0 0 auto;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .qm-single-post-comments .qm-comment-level-image {
        height: 24px;
        width: auto;
        max-width: none;
        object-fit: contain;
        flex-shrink: 0;
    }
}



.qm-single-post-comments .qm-comment-featured-badge {

    position: absolute;

    top: -8px;

    right: -8px;

    width: 80px;   

    height: 80px;  

    opacity: 0.65; 

    pointer-events: none; 

    filter: drop-shadow(0 6px 10px rgba(216, 30, 6, 0.18));

    margin-top: 0;

    transform: rotate(12deg);

}



.qm-single-post-comments .qm-comment-featured-badge .qm-featured-icon {

    width: 100%;

    height: 100%;

    display: block;

}



@media (max-width: 1023px) {

    .qm-single-post-comments .qm-comment-featured-badge {

        width: 64px;

        height: 64px;

        opacity: 0.6;

        top: -6px;

        right: -6px;

    }



    

    .qm-single-post-comments .qm-comment-author-block {

        flex: 1;

        min-width: 0; 

    }



    .qm-single-post-comments .qm-comment-author {

        display: flex;

        align-items: center;

        gap: 2px;

        flex-wrap: wrap;

        min-width: 0;

    }

    .qm-single-post-comments .qm-vip-badge-inline {
        margin-left: 0;
    }



    .qm-single-post-comments .qm-comment-author-name {

        flex: 0 1 auto;

        min-width: 0;

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap; 

    }



    .qm-single-post-comments .qm-comment-level-badge {

        flex: 0 0 auto;

        white-space: nowrap;

    }



    .qm-single-post-comments .qm-comment-meta {

        flex: 0 0 auto;

        display: flex;

        flex-direction: column;

        align-items: flex-end;

        position: relative; 

        min-width: 76px;

    }

}





.qm-single-post-comments .qm-comment-admin-menu {

    position: relative;

    display: inline-flex;

    align-items: center;

}



.qm-single-post-comments .qm-comment-admin-menu-toggle {

    border: none;

    background: transparent;

    color: #6b7280;

    font-size: 16px;

    line-height: 1;

    padding: 6px 8px;

    border-radius: 10px;

}



.qm-single-post-comments .qm-comment-admin-menu-toggle:hover {

    background: rgba(0,0,0,0.05);

    color: #111827;

}



.qm-single-post-comments .qm-comment-admin-menu-panel {

    display: none;

    position: absolute;

    right: 0;

    top: calc(100% + 6px);

    min-width: 120px;

    background: #fff;

    border: 1px solid rgba(0,0,0,0.08);

    box-shadow: 0 12px 28px rgba(0,0,0,0.12);

    border-radius: 12px;

    padding: 6px;

    z-index: 20;

}



.qm-single-post-comments .qm-comment-admin-menu.is-open .qm-comment-admin-menu-panel {

    display: block;

}



.qm-single-post-comments .qm-comment-admin-menu-panel .qm-comment-admin-btn {

    width: 100%;

    text-align: left;

    border: none;

    background: transparent;

    padding: 8px 10px;

    border-radius: 10px;

    color: #111827;

    font-size: 13px;

    line-height: 1.2;

}



.qm-single-post-comments .qm-comment-admin-menu-panel .qm-comment-admin-btn:hover {

    background: rgba(0,0,0,0.06);

}



.qm-single-post-comments .qm-comment-admin-menu-panel .qm-comment-spam-btn:hover {

    background: rgba(239, 68, 68, 0.10);

    color: #b91c1c;

}





.qm-single-post-comments .comment-list .children {

    margin-top: 10px;

}





.qm-comments-error {

    margin: 0 0 12px 0;

    padding: 10px 12px;

    border-radius: 12px;

    background: rgba(239, 68, 68, 0.08);

    border: 1px solid rgba(239, 68, 68, 0.22);

    color: #991b1b;

    font-size: 13px;

    line-height: 1.35;

}





.qm-comment-form-error {

    position: fixed;

    left: 0;

    right: 0;

    bottom: calc(60px + env(safe-area-inset-bottom, 0px));

    max-width: 900px;

    margin: 0 auto;

    z-index: 9992; 

    box-sizing: border-box;

}



@media (max-width: 1023px) {

    .qm-comment-form-error {

        bottom: calc(60px + 3.5rem + env(safe-area-inset-bottom, 0px));

        padding-left: 12px;

        padding-right: 12px;

    }

    body.has-bottom-nav .qm-comment-form-error {

        bottom: calc(60px + 3.5rem + env(safe-area-inset-bottom, 0px));

    }

}





@media (min-width: 1024px) {

    .qm-single-post-comments li.depth-2,

    .qm-single-post-comments li.depth-3,

    .qm-single-post-comments li.depth-4,

    .qm-single-post-comments li.depth-5 {

        margin-left: 56px;

    }

}





/* 移除所有评论项的内边距 */

.qm-single-post-comments .qm-comment-item,

.qm-single-post-comments li.comment,

.qm-single-post-comments .comment-list li,

.qm-single-post-comments .qm-comment-body {

    padding: 0 !important;

}



.qm-single-post-comments li.depth-2 > .qm-comment-body,

.qm-single-post-comments li.depth-3 > .qm-comment-body,

.qm-single-post-comments li.depth-4 > .qm-comment-body,

.qm-single-post-comments li.depth-5 > .qm-comment-body {

    background: rgba(17, 24, 39, 0.02);

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-left: 3px solid rgba(99, 102, 241, 0.35);

    border-radius: 14px;

    padding: 0;

}





.qm-single-post-comments li.depth-2 .qm-comment-avatar img,

.qm-single-post-comments li.depth-3 .qm-comment-avatar img,

.qm-single-post-comments li.depth-4 .qm-comment-avatar img,

.qm-single-post-comments li.depth-5 .qm-comment-avatar img {

    width: 40px !important;

    height: 40px !important;

}



.qm-single-post-comments li.depth-2 .qm-comment-actions,

.qm-single-post-comments li.depth-3 .qm-comment-actions,

.qm-single-post-comments li.depth-4 .qm-comment-actions,

.qm-single-post-comments li.depth-5 .qm-comment-actions {

    margin-top: 8px;

}





.qm-comment-form-wrapper:not(.qm-comment-form-float) {

    display: none;

}





.qm-article-detail #back-to-top,

.qm-article-detail .qm-back-to-top {

    z-index: 9989 !important; 

    

    bottom: 80px !important;

    right: 2rem !important; 

}





@media (max-width: 1023px) {

    .qm-comment-form.qm-comment-form-float {

        bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));

    }

    

    

    body.has-bottom-nav .qm-comment-form.qm-comment-form-float {

        bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));

    }

    

    

    .qm-article-detail #back-to-top,

    .qm-article-detail .qm-back-to-top {

        bottom: calc(3.5rem + 60px + env(safe-area-inset-bottom, 0px)) !important;

    }

    

    

    body.has-bottom-nav .qm-article-detail #back-to-top,

    body.has-bottom-nav .qm-article-detail .qm-back-to-top {

        bottom: calc(3.5rem + 60px + env(safe-area-inset-bottom, 0px)) !important;

    }



}







.qm-comment-form.qm-comment-form-float {

    position: static;

    bottom: auto;

    left: auto;

    right: auto;

    z-index: auto;

    max-width: 100%;

    margin: 16px 0 12px 0;

    padding: 0;

    background: transparent;

    border-top: none;

    box-shadow: none;

    display: flex;

    align-items: center;

}





.qm-comment-form.qm-comment-form-float.is-inline-reply {

    position: static !important;

    left: auto !important;

    right: auto !important;

    bottom: auto !important;

    max-width: 100% !important;

    margin: 10px 0 0 !important;

    padding: 0 !important;

    z-index: auto !important;

}





.qm-reply-cancel-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 6px 10px;

    margin-bottom: 8px;

    border: 1px solid #e5e7eb;

    background: #ffffff;

    color: #6b7280;

    border-radius: 10px;

    font-size: 13px;

    cursor: pointer;

}



.qm-reply-cancel-btn:hover {

    border-color: #cbd5e1;

    color: #374151;

}





@supports (backdrop-filter: blur(10px)) {

.qm-comment-form-float .qm-comment-form {

    background: transparent;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

}

}





.qm-comment-field-hidden {

    display: none !important;

}





.comment-form-cookies-consent,

.comment-form-cookies-consent * {

    display: none !important;

}





.qm-comment-field-float {

    flex: 1;

    margin: 0;

    padding: 0;

}



.qm-comment-input-wrapper {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 8px 16px;

    background: #f3f4f6;

    border-radius: 24px;

    border: 2px solid transparent;

    background-image:

        linear-gradient(#f3f4f6, #f3f4f6),

        linear-gradient(135deg, #7c3aed, #ec4899, #f97316);

    background-origin: border-box;

    background-clip: padding-box, border-box;

    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);

    transition: all 0.2s ease;

}



.qm-comment-input-wrapper:focus-within {

    background: #ffffff;

    background-image:

        linear-gradient(#ffffff, #ffffff),

        linear-gradient(135deg, #7c3aed, #ec4899, #f97316);

    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);

}





.qm-comment-image-preview {

    display: flex;

    gap: 8px;

    align-items: center;

    margin-bottom: 8px;

    overflow-x: auto;

    overflow-y: visible; 

    padding: 6px 6px 2px 6px; 

}



.qm-comment-image-item {

    position: relative;

    flex: 0 0 auto;

    overflow: visible; 

}



.qm-comment-image-thumb {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    object-fit: cover;

    border: 1px solid rgba(229, 231, 235, 0.9);

    background: #fff;

}



.qm-comment-image-remove {

    position: absolute;

    top: -6px;

    right: -6px;

    width: 18px;

    height: 18px;

    border-radius: 999px;

    border: none;

    background: rgba(17, 24, 39, 0.75);

    color: #fff;

    font-size: 14px;

    line-height: 18px;

    cursor: pointer;

}





.qm-comment-images {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 8px;

}



.qm-comment-image-link {

    display: inline-block;

}



.qm-comment-image {

    width: 72px;

    height: 72px;

    border-radius: 12px;

    object-fit: cover;

    border: 1px solid rgba(229, 231, 235, 0.9);

    background: #fff;

}





.qm-comment-attach-btn {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    border-radius: 50%;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

    padding: 0;

}



.qm-comment-attach-btn:hover {

    background: rgba(37, 99, 235, 0.1);

    color: #2563eb;

}



.qm-comment-attach-btn i {

    font-size: 16px;

}





.qm-comment-field-float textarea {

    flex: 1;

    min-height: 44px;

    max-height: 200px;

    padding: 0;

    margin: 0;

    background: transparent;

    border: none;

    outline: none;

    resize: none;

    font-size: 14px;

    line-height: 20px;

    color: #111827;

    font-family: inherit;

    overflow-y: auto;

}



.qm-comment-field-float textarea::placeholder {

    color: #9ca3af;

}





.qm-comment-send-btn {

    flex-shrink: 0;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    border-radius: 50%;

    color: #6b7280;

    cursor: pointer;

    transition: all 0.2s ease;

    padding: 0;

}



.qm-comment-send-btn:hover {

    background: rgba(37, 99, 235, 0.1);

    color: #2563eb;

}



.qm-comment-send-btn:active {

    transform: scale(0.95);

}



.qm-comment-send-btn i {

    font-size: 16px;

}





.qm-comment-form-float .qm-comment-submit-btn {

    display: none;

}





.qm-comment-toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 6px;

}



.qm-comment-quick-replies {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

}



.qm-comment-quick-reply-btn {

    padding: 2px 8px;

    border-radius: 999px;

    border: 1px solid #e5e7eb;

    background: #f9fafb;

    font-size: 12px;

    color: #6b7280;

    cursor: pointer;

    transition: background .15s ease, color .15s ease, border-color .15s ease;

}



.qm-comment-quick-reply-btn:hover {

    background: #eff6ff;

    border-color: #bfdbfe;

    color: #1d4ed8;

}



.qm-comment-toolbar-right {

    display: flex;

    align-items: center;

    gap: 4px;

    margin-left: auto;

}



.qm-comment-emoji-toggle {

    border: none;

    background: transparent;

    cursor: pointer;

    font-size: 18px;

    line-height: 1;

    padding: 2px 6px;

    border-radius: 999px;

    transition: background .15s ease;

}



.qm-comment-emoji-toggle:hover {

    background: rgba(148, 163, 184, 0.2);

}



.qm-comment-emoji-panel {

    display: none;

    margin-top: 6px;

    padding: 6px 8px;

    border-radius: 10px;

    background: #f9fafb;

    border: 1px solid #e5e7eb;

    max-width: 100%;

    max-height: 160px;

    overflow-y: auto;

}



.qm-comment-emoji-panel.is-open {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

}



.qm-comment-emoji-item {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 6px;

    cursor: pointer;

    font-size: 18px;

    transition: background .15s ease, transform .1s ease;

}



.qm-comment-emoji-item:hover {

    background: rgba(148, 163, 184, 0.2);

    transform: scale(1.05);

}



.dark .qm-comment-emoji-panel {

    background: #020617;

    border-color: #1e293b;

}



.dark .qm-comment-quick-reply-btn {

    background: #020617;

    border-color: #1e293b;

    color: #9ca3af;

}



.dark .qm-comment-quick-reply-btn:hover {

    background: rgba(37, 99, 235, 0.25);

    border-color: #1d4ed8;

    color: #e5e7eb;

}





@media (max-width: 640px) {

    .qm-comment-form-float .qm-comment-form {

        padding: 10px 12px;

    }

    

    .qm-comment-input-wrapper {

        padding: 6px 12px;

        gap: 8px;

    }

    

    .qm-comment-attach-btn,

    .qm-comment-send-btn {

        width: 28px;

        height: 28px;

    }

    

    .qm-comment-attach-btn i,

    .qm-comment-send-btn i {

        font-size: 14px;

    }

    

    .qm-comment-field-float textarea {

        font-size: 14px;

    }

}





.dark .qm-comment-form-float .qm-comment-form {

    background: rgba(30, 41, 59, 0.95);

    border-top-color: #334155;

}



@supports (backdrop-filter: blur(10px)) {

    .dark .qm-comment-form-float .qm-comment-form {

        background: rgba(30, 41, 59, 0.85);

    }

}



.dark .qm-comment-input-wrapper {

    background: #1f2937;

    border-color: #374151;

}



.dark .qm-comment-input-wrapper:focus-within {

    background: #111827;

    border-color: #2563eb;

}



.dark .qm-comment-field-float textarea {

    color: #f3f4f6;

}



.dark .qm-comment-field-float textarea::placeholder {

    color: #6b7280;

}



.dark .qm-comment-attach-btn,

.dark .qm-comment-send-btn {

    color: #9ca3af;

}



.dark .qm-comment-attach-btn:hover,

.dark .qm-comment-send-btn:hover {

    background: rgba(37, 99, 235, 0.2);

    color: #60a5fa;

}





.qm-paywall {

    position: relative;

    border-radius: 14px;

}



.qm-paywall-content {

    position: relative;

    overflow: hidden;

    transition: max-height .2s ease;

}



.qm-paywall.is-locked .qm-paywall-mask {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 180px;

    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92) 55%, rgba(255,255,255,1));

    pointer-events: none;

}



body.dark .qm-paywall.is-locked .qm-paywall-mask,

.dark .qm-paywall.is-locked .qm-paywall-mask {

    background: linear-gradient(to bottom, rgba(17,24,39,0), rgba(17,24,39,.92) 55%, rgba(17,24,39,1));

}



.qm-paywall-actions {

    position: absolute;

    left: 0;

    right: 0;

    bottom: 14px;

    display: flex;

    justify-content: center;

    pointer-events: none;

}



.qm-paywall-btn {

    pointer-events: auto;

    border: 0;

    border-radius: 999px;

    padding: 10px 16px;

    font-size: 14px;

    font-weight: 600;

    color: #fff;

    background: #111827;

    box-shadow: 0 10px 24px rgba(0,0,0,.18);

}



.qm-paywall-btn:hover { opacity: .92; }





.qm-read-modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    align-items: center;

    justify-content: center;

}



.qm-read-modal-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.55);

}



.qm-read-modal-content {

    position: relative;

    width: min(520px, calc(100vw - 32px));

    background: #fff;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0,0,0,.25);

}



.qm-read-modal-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 14px 16px;

    border-bottom: 1px solid rgba(0,0,0,.06);

}



.qm-read-modal-header h3 { margin: 0; font-size: 16px; }



.qm-read-modal-close {

    border: 0;

    background: transparent;

    cursor: pointer;

    font-size: 16px;

    color: #374151;

}



.qm-read-modal-body { padding: 16px; }

.qm-read-modal-price { margin-bottom: 10px; }

.qm-read-modal-methods-title { margin: 10px 0 8px; color: #374151; font-size: 13px; }

.qm-read-modal-methods-list { display: flex; flex-wrap: wrap; gap: 10px; }



.qm-read-method-btn {

    border: 1px solid rgba(0,0,0,.10);

    background: #fff;

    border-radius: 10px;

    padding: 10px 12px;

    cursor: pointer;

    font-size: 14px;

}



.qm-read-method-btn:hover { border-color: rgba(0,0,0,.2); }



.qm-read-modal-refresh {

    border: 0;

    background: #111827;

    color: #fff;

    border-radius: 10px;

    padding: 10px 12px;

    cursor: pointer;

}



.dark .qm-read-modal-content,

body.dark .qm-read-modal-content {

    background: #111827;

    color: #e5e7eb;

}



.dark .qm-read-modal-header,

body.dark .qm-read-modal-header { border-bottom-color: rgba(255,255,255,.08); }



.dark .qm-read-modal-close,

body.dark .qm-read-modal-close { color: #e5e7eb; }



.dark .qm-read-method-btn,

body.dark .qm-read-method-btn {

    background: #0b1220;

    border-color: rgba(255,255,255,.10);

    color: #e5e7eb;

}





.qm-vip-discount-badge {

    display: inline-block;

    margin-left: 8px;

    padding: 2px 8px;

    border-radius: 999px;

    font-size: 12px;

    line-height: 1.4;

    color: #b45309;

    background: rgba(251, 191, 36, 0.16);

    border: 1px solid rgba(245, 158, 11, 0.4);

}



.dark .qm-vip-discount-badge,

body.dark .qm-vip-discount-badge {

    color: #facc15;

    background: rgba(251, 191, 36, 0.08);

    border-color: rgba(250, 204, 21, 0.45);

}





.qm-download-btn-label {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.qm-download-tag {

    display: inline-block;

    padding: 2px 10px;

    border-radius: 999px;

    font-size: 13px;

    line-height: 1.4;

}



.qm-download-btn-wrapper {

    position: relative;

    display: inline-block;

}



.qm-download-tag-corner {

    position: absolute;

    top: -8px;

    right: -8px;

    z-index: 10;

    font-size: 11px;

    padding: 3px 8px;

    white-space: nowrap;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

}



/* 移动端缩小价格标签 */

@media (max-width: 767.98px) {

    .qm-download-tag-corner {

        font-size: 9px !important;

        padding: 2px 5px !important;

        top: -6px !important;

        right: -6px !important;

        line-height: 1.2 !important;

        border-radius: 8px !important;

    }

    

    .qm-download-tag {

        font-size: 10px !important;

        padding: 2px 6px !important;

    }

}



.qm-download-tag-free {

    color: #15803d;

    background: #ecfdf3;

    border: 1px solid rgba(22, 163, 74, 0.28);

    font-weight: 600;

}



.qm-download-tag-price {

    color: #111827;

    background: #fefce8;

    border: 1px solid rgba(250, 204, 21, 0.45);

    font-weight: 700;

}



.qm-download-tag-vip {

    color: #ffffff !important;

    background: rgba(251, 191, 36, 0.16);

}



.dark .qm-download-tag-free,

body.dark .qm-download-tag-free {

    color: #bbf7d0;

    background: rgba(22, 163, 74, 0.18);

    border-color: rgba(34, 197, 94, 0.5);

}



.dark .qm-download-tag-price,

body.dark .qm-download-tag-price {

    color: #facc15;

    background: rgba(30, 64, 175, 0.45);

    border-color: rgba(250, 204, 21, 0.7);

}



.dark .qm-download-tag-vip,

body.dark .qm-download-tag-vip {

    color: #ffffff !important;

    background: rgba(251, 191, 36, 0.12);

}



/* 订单支付成功弹窗 */

.qm-order-success-modal {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 10000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



.qm-order-success-modal__backdrop {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

}



.qm-order-success-modal__container {

    position: relative;

    background: #ffffff;

    border-radius: 16px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

    max-width: 500px;

    width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    z-index: 1;

}



.qm-order-success-modal__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px;

    border-bottom: 1px solid #e5e7eb;

}



.qm-order-success-modal__header h3 {

    margin: 0;

    font-size: 20px;

    font-weight: 600;

    color: #111827;

}



.qm-order-success-modal__close {

    background: none;

    border: none;

    font-size: 20px;

    color: #6b7280;

    cursor: pointer;

    padding: 4px;

    line-height: 1;

    transition: color 0.2s;

}



.qm-order-success-modal__close:hover {

    color: #111827;

}



.qm-order-success-modal__body {

    padding: 32px 24px;

    text-align: center;

}



.qm-order-success-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #10b981;

    border-radius: 50%;

    color: #ffffff;

    font-size: 40px;

}



.qm-order-success-info {

    text-align: left;

}



.qm-order-info-item {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 12px 0;

    border-bottom: 1px solid #f3f4f6;

}



.qm-order-info-item:last-child {

    border-bottom: none;

}



.qm-order-info-label {

    color: #6b7280;

    font-size: 14px;

}



.qm-order-info-value {

    color: #111827;

    font-size: 14px;

    font-weight: 500;

}



.qm-order-amount {

    color: #10b981;

    font-weight: 600;

    font-size: 16px;

}



.qm-order-success-modal__footer {

    display: flex;

    gap: 12px;

    padding: 24px;

    border-top: 1px solid #e5e7eb;

}



.qm-order-success-btn {

    flex: 1;

    padding: 12px 24px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 500;

    border: none;

    cursor: pointer;

    transition: all 0.2s;

}



.qm-order-success-btn-primary {

    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);

    color: #ffffff;

}



.qm-order-success-btn-primary:hover {

    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);

}



.qm-order-success-btn-secondary {

    background: #f3f4f6;

    color: #374151;

}



.qm-order-success-btn-secondary:hover {

    background: #e5e7eb;

}



.dark .qm-order-success-modal__container {

    background: #1f2937;

}



.dark .qm-order-success-modal__header {

    border-bottom-color: #374151;

}



.dark .qm-order-success-modal__header h3 {

    color: #f3f4f6;

}



.dark .qm-order-success-modal__close {

    color: #9ca3af;

}



.dark .qm-order-success-modal__close:hover {

    color: #f3f4f6;

}



.dark .qm-order-info-item {

    border-bottom-color: #374151;

}



.dark .qm-order-info-label {

    color: #9ca3af;

}



.dark .qm-order-info-value {

    color: #f3f4f6;

}



.dark .qm-order-success-modal__footer {

    border-top-color: #374151;

}



.dark .qm-order-success-btn-secondary {

    background: #374151;

    color: #d1d5db;

}



.dark .qm-order-success-btn-secondary:hover {

    background: #4b5563;

}