/* 模板4 - APP 下载落地页（黄底双栏，仿包子漫画） */

.tpl4-page{
    --tpl4-yellow:#ffdc00;
    --tpl4-primary:#ff6b35;
    --tpl4-primary-hover:#e85a28;
    --tpl4-title:#111;
    --tpl4-text:#333;
    --tpl4-bg:#fff;
    --tpl4-badge-1:#e53935;
    --tpl4-badge-2:#1565c0;
    --tpl4-badge-3:#039be5;
    --tpl4-badge-4:#7b1fa2;
    background:var(--tpl4-bg);
}

/* ========== 顶部黄底双栏 ========== */
.tpl4-top{
    background:var(--tpl4-yellow);
    padding:40px 0 36px;
}

.tpl4-top-inner{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:32px 40px;
    align-items:center;
}

.tpl4-top--text-only{
    text-align:center;
}

.tpl4-top--text-only .tpl4-desc{
    max-width:720px;
    margin-left:auto;
    margin-right:auto;
}

.tpl4-hero{
    text-align:left;
}

.tpl4-title{
    font-size:clamp(24px,3.2vw,36px);
    font-weight:800;
    color:var(--tpl4-title);
    line-height:1.35;
    margin:0 0 16px;
}

.tpl4-desc{
    font-size:15px;
    color:#222;
    line-height:1.85;
    margin:0 0 20px;
}

.tpl4-tag-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:0;
}

.tpl4-tag-item{
    display:inline-block;
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    color:#fff!important;
    text-decoration:none;
    line-height:1.2;
    box-shadow:0 2px 8px rgba(0,0,0,.12);
}

a.tpl4-tag-item:hover{
    opacity:.92;
    text-decoration:none;
    transform:translateY(-1px);
}

.tpl4-hero .download-file-size{display:none}

/* ========== 右侧截图展示 ========== */
.tpl4-showcase{
    min-width:0;
}

.tpl4-gallery-wrap{
    position:relative;
    overflow:hidden;
    padding:0 40px 28px;
}

.tpl4-gallery-track{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:8px 4px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-behavior:smooth;
}

.tpl4-gallery-track::-webkit-scrollbar{display:none}

.tpl4-gallery-btn{
    position:absolute;
    top:calc(50% - 14px);
    transform:translateY(-50%);
    z-index:2;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.95);
    box-shadow:0 4px 14px rgba(0,0,0,.12);
    cursor:pointer;
    font-size:22px;
    line-height:1;
    color:#333;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:opacity .2s,transform .2s;
}

.tpl4-gallery-btn:hover:not(:disabled){
    transform:translateY(-50%) scale(1.05);
}

.tpl4-gallery-btn:disabled{
    opacity:0;
    pointer-events:none;
}

.tpl4-gallery-prev{left:0}
.tpl4-gallery-next{right:0}

.tpl4-gallery-item{
    flex:0 0 150px;
    scroll-snap-align:start;
    margin:0;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
    aspect-ratio:9/16;
    box-shadow:0 10px 28px rgba(0,0,0,.15);
}

.tpl4-gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.tpl4-gallery-scroll{
    position:absolute;
    left:40px;
    right:40px;
    bottom:0;
    height:6px;
    background:rgba(255,255,255,.85);
    border-radius:999px;
    overflow:hidden;
}

.tpl4-gallery-scroll-thumb{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:30%;
    background:#111;
    border-radius:999px;
    transition:transform .15s ease,width .15s ease;
    will-change:transform;
}

.tpl4-download-group{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
    margin-top:8px;
}

.tpl4-showcase .download-file-size{
    justify-content:center;
    margin:0 0 12px;
    color:#333;
    font-size:13px;
}

.tpl4-download-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:120px;
    padding:11px 22px;
    background:#111;
    color:#fff!important;
    font-size:14px;
    font-weight:600;
    border-radius:999px;
    text-decoration:none;
    transition:transform .2s,background .2s;
}

.tpl4-download-btn:hover{
    background:#000;
    transform:translateY(-1px);
    color:#fff!important;
    text-decoration:none;
}

/* ========== 正文 ========== */
.tpl4-content{
    padding:32px 0 40px;
    background:#fff;
}

.tpl4-article-body{
    line-height:1.85;
    font-size:15px;
    color:var(--tpl4-text);
}

.tpl4-article-body img{
    max-width:100%;
    border-radius:8px;
    margin:12px auto;
}

/* ========== 评价 / 推荐 ========== */
.tpl4-reviews{
    padding:36px 0;
    background:#fafafa;
}

.tpl4-section-title{
    font-size:22px;
    font-weight:700;
    text-align:center;
    margin-bottom:24px;
    color:var(--tpl4-title);
    position:relative;
}

.tpl4-section-title::after{
    content:'';
    display:block;
    width:48px;
    height:3px;
    background:var(--tpl4-primary);
    margin:10px auto 0;
    border-radius:2px;
}

.tpl4-reviews .comment-section{
    background:transparent;
    box-shadow:none;
    padding:0;
    margin:0;
}

.tpl4-reviews .comment-section h3{display:none}

.tpl4-reviews .comment-form{
    max-width:640px;
    margin:0 auto 28px;
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 2px 12px rgba(0,0,0,.05);
}

.tpl4-reviews .btn-comment{background:var(--tpl4-primary)}
.tpl4-reviews .btn-comment:hover{background:var(--tpl4-primary-hover)}

.tpl4-reviews .comment-item{
    background:#fff;
    padding:18px;
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    margin-bottom:12px;
    border-bottom:none;
}

.tpl4-reviews .comment-reply{
    box-shadow:none;
    background:#fafafa;
}

.tpl4-empty{
    text-align:center;
    color:#999;
    padding:24px 0;
}

.tpl4-recommend{
    padding:36px 0 48px;
    background:#fff;
}

.tpl4-recommend-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:14px;
    max-width:960px;
    margin:0 auto;
}

.tpl4-recommend-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    background:#f9fafb;
    border:1px solid #eee;
    border-radius:12px;
    color:inherit;
    text-decoration:none;
    transition:border-color .2s,box-shadow .2s;
}

.tpl4-recommend-card:hover{
    border-color:color-mix(in srgb,var(--tpl4-primary) 35%,#eee);
    box-shadow:0 4px 16px color-mix(in srgb,var(--tpl4-primary) 10%,transparent);
    text-decoration:none;
}

.tpl4-recommend-cover{
    flex-shrink:0;
    width:72px;
    height:72px;
    border-radius:10px;
    overflow:hidden;
    background:#eee;
}

.tpl4-recommend-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.tpl4-recommend-body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.tpl4-recommend-title{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:15px;
    font-weight:600;
    color:var(--tpl4-title);
    line-height:1.45;
    word-break:break-word;
}

.tpl4-recommend-link{
    font-size:13px;
    color:var(--tpl4-primary);
    font-weight:600;
}

@media(max-width:900px){
    .tpl4-top-inner{
        grid-template-columns:1fr;
        gap:28px;
    }

    .tpl4-hero{
        text-align:center;
    }

    .tpl4-tag-list{
        justify-content:center;
    }
}

@media(max-width:768px){
    .tpl4-top{padding:28px 0 24px}

    .tpl4-gallery-wrap{padding:0 34px 26px}

    .tpl4-gallery-btn{
        width:30px;
        height:30px;
        font-size:18px;
    }

    .tpl4-gallery-item{flex-basis:130px}

    .tpl4-gallery-scroll{
        left:34px;
        right:34px;
    }

    .tpl4-download-group{gap:10px}

    .tpl4-download-btn{
        min-width:0;
        flex:1 1 calc(50% - 10px);
        padding:10px 14px;
        font-size:13px;
    }

    .tpl4-recommend-grid{
        grid-template-columns:1fr;
    }
}