/* ========================================
   A-Plus Pay — 新增模块样式（不修改原 style.css）
   APP 下载按钮 / 文章栏目 / 文章详情
   ======================================== */

/* ========== APP DOWNLOAD BUTTONS ========== */
.app-download { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-dl { margin: -28px 0 44px; }
.cta-dl { justify-content: center; margin-top: 20px; position: relative; z-index: 1; }
.store-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px 9px 16px;
    border-radius: 14px;
    background: #1A0A14;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 18px rgba(26, 10, 20, 0.18);
    transition: var(--transition);
    min-width: 168px;
}
.store-btn svg { width: 26px; height: 26px; flex-shrink: 0; }
.store-btn:hover {
    transform: translateY(-2px);
    background: var(--brand-gradient-dark);
    box-shadow: 0 8px 28px rgba(74, 14, 46, 0.32);
}
.store-txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.store-txt small { font-size: 10.5px; opacity: 0.75; font-weight: 500; letter-spacing: 0.02em; }
.store-txt strong { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* ========== ARTICLES SECTION ========== */
.articles-section { padding: 120px 0; text-align: center; background: var(--bg-alt); }
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: left;
}
.article-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(30px);
}
.article-card.in-view { opacity: 1; transform: translateY(0); }
.article-card:hover, .article-card.in-view:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.article-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--brand-gradient-dark); }
.article-cover > img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.article-card:hover .article-cover > img { transform: scale(1.05); }
.article-cover-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-gradient);
}
.article-cover-ph img { width: 64px; height: 64px; object-fit: contain; opacity: 0.9; }
.article-type {
    position: absolute; top: 14px; left: 14px;
    padding: 4px 12px; border-radius: 99px;
    background: rgba(255,255,255,0.92);
    color: var(--brand-dark);
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.article-body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.article-body time { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.article-body h3 { font-size: 19px; margin-bottom: 10px; color: var(--text-primary); }
.article-body p {
    font-size: 15px; color: var(--text-secondary); line-height: 1.7; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.articles-more { margin-top: 48px; }
.articles-empty { color: var(--text-muted); font-size: 17px; padding: 40px 0; text-align: center; }

/* ========== SUBPAGES ========== */
.page-hero, .article-detail { position: relative; padding: 150px 0 40px; overflow: hidden; text-align: center; }
.page-hero-inner { position: relative; z-index: 1; }
.page-hero .section-desc { margin-bottom: 0; }
.articles-page { padding-top: 60px; background: var(--bg); }

.pager { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pager a {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); font-weight: 600; color: var(--text-secondary);
    transition: var(--transition-fast);
}
.pager a:hover { border-color: var(--brand-rose); color: var(--brand-dark); }
.pager a.active { background: var(--brand-gradient-dark); color: #fff; border-color: transparent; }

.article-detail { text-align: left; padding-bottom: 100px; min-height: 100vh; }
.article-container { position: relative; z-index: 1; max-width: 880px; }
.breadcrumb { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--brand-dark); }
.article-head time { font-size: 14px; color: var(--brand-rose); font-weight: 600; }
.article-title { font-size: clamp(30px, 4.5vw, 46px); margin: 10px 0 18px; letter-spacing: -0.03em; }
.article-summary { font-size: 18px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 32px; }
.article-hero-img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 36px; box-shadow: var(--shadow-md); }

.article-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 48px 52px;
    box-shadow: var(--shadow-md);
}
.rich-text { font-size: 17px; color: var(--text-primary); line-height: 1.9; word-wrap: break-word; }
.rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { margin: 1.6em 0 0.6em; }
.rich-text h2 { font-size: 26px; }
.rich-text h3 { font-size: 21px; }
.rich-text p { margin-bottom: 1.1em; color: var(--text-secondary); }
.rich-text a { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.rich-text ul, .rich-text ol { padding-left: 1.4em; margin-bottom: 1.1em; color: var(--text-secondary); }
.rich-text img { border-radius: var(--radius); margin: 1.2em 0; }
.rich-text blockquote {
    border-left: 3px solid var(--brand-rose); padding: 6px 0 6px 20px; margin: 1.4em 0;
    color: var(--text-secondary); font-style: italic;
}
.rich-text table { width: 100%; border-collapse: collapse; margin: 1.2em 0; font-size: 15px; }
.rich-text th, .rich-text td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; }
.rich-text > *:first-child { margin-top: 0; }
.article-pre { white-space: pre-wrap; font-family: inherit; color: var(--text-secondary); }

/* ========== 满屏文件展示（HTML / PDF / Word / 表格 / 图片） ========== */
.file-fullpage {
    width: 100%;
    min-height: 100vh;
    padding-top: var(--nav-h, 66px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.article-frame { width: 100%; min-height: 600px; border: 0; border-radius: var(--radius); display: block; background: #fff; }
.article-frame-full {
    width: 100%;
    flex: 1;
    height: calc(100vh - var(--nav-h, 66px));
    min-height: calc(100vh - var(--nav-h, 66px));
    border: 0;
    border-radius: 0 !important;
    display: block;
}
.doc-viewer-full {
    width: 100%;
    flex: 1;
    min-height: calc(100vh - var(--nav-h, 66px));
    background: var(--bg-alt);
    box-sizing: border-box;
}
.doc-viewer-full .docx-wrapper {
    background: var(--bg-alt) !important;
    padding: 32px 16px !important;
}
.doc-viewer-full .docx-wrapper > section.docx {
    box-shadow: var(--shadow-md) !important;
    margin-bottom: 24px !important;
}
.doc-loading {
    min-height: calc(100vh - var(--nav-h, 66px));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
}
.doc-viewer-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #140a10;
}
.doc-viewer-img img {
    max-width: 100%;
    max-height: calc(100vh - var(--nav-h, 66px) - 48px);
    object-fit: contain;
    border-radius: 8px;
}
.doc-viewer-txt {
    padding: 40px 0;
    background: var(--bg-card);
}
.doc-viewer-sheet {
    padding: 32px 24px;
    background: var(--bg-card);
    overflow-x: auto;
}
.sheet-wrap { max-width: 1200px; margin: 0 auto; }
.sheet-title { margin: 24px 0 12px; font-size: 18px; color: var(--brand-dark); }
.sheet-wrap table { width: 100%; border-collapse: collapse; margin-bottom: 28px; font-size: 14px; }
.sheet-wrap td, .sheet-wrap th { border: 1px solid var(--border); padding: 8px 12px; }
.doc-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.file-bottom-bar {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    padding: 16px 0;
}
.file-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.file-bottom-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
body.subpage .footer { padding-top: 44px; }
body.subpage .footer-top { padding-bottom: 32px; }

.article-download {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border);
}
.article-download:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.file-chip { display: flex; align-items: center; gap: 12px; font-weight: 600; color: var(--text-primary); word-break: break-all; }
.file-chip span {
    padding: 8px 10px; border-radius: 10px; background: var(--brand-gradient); color: #fff;
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
}
.article-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .articles-grid { grid-template-columns: 1fr; }
    .articles-section { padding: 80px 0; }
    .article-content { padding: 28px 22px; }
    .hero-dl { margin: -24px 0 36px; }
    .store-btn { min-width: 0; flex: 1; }
}