/* ==========================================================================
   鏍忕洰鍒楄〃妯℃澘鏍峰紡锛坓rid 娌跨敤 category.css锛岃繖閲屽彧鍐?compact / list / h5锛?
   ========================================================================== */

/* ---------- 绱у噾缃戞牸 compact ---------- */
.tpl-compact{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}
.tc-card{
    display:block;
    background:var(--card,#0f172a);
    border:1px solid var(--border,#e5e9f2);
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor:pointer;
}
.tc-card:hover{
    transform:translateY(-3px);
    border-color:rgba(34,211,238,.42);
    box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.tc-cover{
    position:relative;
    width:100%;
    aspect-ratio:16/10;
    background:var(--bg-soft,#eff3f9);
    overflow:hidden;
}
.tc-cover img{
    width:100%;height:100%;object-fit:cover;display:block;
}
.tc-badge{
    position:absolute;right:8px;bottom:8px;
    padding:2px 8px;border-radius:99px;
    font-size:12px;line-height:18px;color:#fff;
    background:rgba(15,23,42,.62);
    backdrop-filter:blur(4px);
}
.tc-body{padding:12px 14px 14px;}
.tc-title{
    font-size:14px;line-height:1.45;font-weight:600;color:var(--text,#16203a);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:41px;
}
.tc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.tc-tags span{
    font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;
    color:var(--primary,#4f6df5);background:var(--primary-soft,#edf1ff);
    white-space:nowrap;
}

/* ---------- 璧勮鍒楄〃 list ---------- */
.tpl-list{
    display:flex;flex-direction:column;gap:12px;margin-bottom:24px;
}
.tl-row{
    display:flex;align-items:flex-start;gap:16px;
    background:var(--card,#0f172a);
    border:1px solid var(--border,#e5e9f2);
    border-radius:14px;
    padding:14px;
    text-decoration:none;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor:pointer;
}
.tl-row:hover{
    transform:translateY(-2px);
    border-color:rgba(34,211,238,.42);
    box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.tl-cover{
    flex:0 0 168px;width:168px;aspect-ratio:16/10;
    border-radius:10px;overflow:hidden;background:var(--bg-soft,#eff3f9);
}
.tl-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.tl-main{flex:1;min-width:0;}
.tl-title{
    font-size:16px;line-height:1.4;font-weight:600;color:var(--text,#16203a);
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.tl-desc{
    margin-top:6px;font-size:13px;line-height:1.6;color:var(--text-sub,#5b6780);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;}
.tl-tag{
    font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;
    color:var(--primary,#4f6df5);background:var(--primary-soft,#edf1ff);
}
.tl-count{font-size:12px;color:var(--muted,#8d97ad);}
.tl-action{
    flex:0 0 auto;align-self:center;
    font-size:13px;font-weight:600;color:var(--primary,#4f6df5);
    padding:7px 14px;border-radius:99px;
    background:var(--primary-soft,#edf1ff);
    white-space:nowrap;
}

/* ---------- H5 璇曠帺 h5 ---------- */
.tpl-h5{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin-bottom:24px;
}
.th-card{
    display:block;
    background:var(--card,#0f172a);
    border:1px solid var(--border,#e5e9f2);
    border-radius:16px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor:pointer;
}
.th-card:hover{
    transform:translateY(-4px);
    border-color:rgba(34,211,238,.42);
    box-shadow:0 14px 30px rgba(0,0,0,.5);
}
.th-cover{
    position:relative;
    width:100%;
    aspect-ratio:3/4;
    overflow:hidden;
    background:linear-gradient(160deg,#0b1424,#121a2b);
}
.th-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.th-badge{
    position:absolute;left:10px;top:10px;
    font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;
    color:#fff;background:linear-gradient(135deg,#22d3ee,#3b82f6);
    box-shadow:0 4px 12px rgba(34,211,238,.35);
}
.th-play{
    position:absolute;left:10px;right:10px;bottom:10px;
    display:flex;align-items:center;justify-content:center;gap:6px;
    height:34px;border-radius:99px;
    font-size:13px;font-weight:600;color:#fff;
    background:linear-gradient(135deg,#22d3ee,#3b82f6);
    box-shadow:0 6px 16px rgba(34,211,238,.32);
    opacity:.94;
    transition:opacity .18s ease;
}
.th-card:hover .th-play{opacity:1;}
.th-body{padding:12px 12px 14px;}
.th-title{
    font-size:14px;line-height:1.45;font-weight:600;color:var(--text,#16203a);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:41px;
}
.th-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;}
.th-meta span{
    font-size:12px;line-height:20px;padding:0 8px;border-radius:99px;
    color:var(--text-sub,#5b6780);background:var(--bg-soft,#eff3f9);
}
.th-count{margin-left:auto;color:var(--warning,#f79009) !important;background:transparent !important;}

/* ---------- 楂樺瘑搴︿簲鍒?dense ---------- */
.tpl-dense{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:22px 18px;
    margin-bottom:24px;
}
.td-card{
    display:flex;flex-direction:column;
    background:var(--card,#0f172a);
    border:1px solid #eef1f7;
    border-radius:10px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 1px 4px rgba(0,0,0,.35);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    cursor:pointer;
}
.td-card:hover{
    transform:translateY(-3px);
    border-color:#dfe5f2;
    box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.td-cover{
    width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft,#eff3f9);
}
.td-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.td-body{
    padding:10px 12px 12px;
    display:flex;flex-direction:column;flex:1;
}
.td-tags{
    font-size:11px;line-height:18px;color:var(--muted,#8d97ad);
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;
    margin-bottom:6px;
}
.td-dot{width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:4px;flex:0 0 auto;}
.td-dot.d1{background:#f79009;}
.td-dot.d2{background:#12b76a;}
.td-dot.d3{background:#4f6df5;}
.td-title{
    font-size:14px;line-height:1.4;font-weight:700;color:var(--text,#16203a);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:39px;
}
.td-desc{
    margin-top:8px;
    font-size:12px;line-height:1.65;color:var(--muted,#8d97ad);
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    flex:1;
}
.td-foot{
    display:flex;align-items:center;gap:12px;
    margin-top:10px;padding-top:8px;
    border-top:1px solid #1b2436;
    font-size:11px;color:#9aa4b8;
}
.td-num{margin-left:auto;}

/* ---------- 鏋佺畝娴锋姤 mini ---------- */
.tpl-mini{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:18px 14px;
    margin-bottom:24px;
}
.tm-card{
    display:block;text-decoration:none;
    background:var(--card,#0f172a);
    border:1px solid #eef1f7;
    border-radius:8px;
    overflow:hidden;
    transition:transform .16s ease, box-shadow .16s ease;
    cursor:pointer;
}
.tm-card:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 22px rgba(0,0,0,.45);
}
.tm-cover{
    position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft,#eff3f9);
}
.tm-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.tm-count{
    position:absolute;right:6px;bottom:6px;
    font-size:11px;line-height:17px;padding:0 6px;border-radius:99px;
    color:#fff;background:rgba(15,23,42,.58);
}
.tm-title{
    padding:8px 9px 9px;
    font-size:12.5px;line-height:1.35;color:var(--text,#16203a);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- 鍝嶅簲寮?---------- */
@media (max-width:1200px){
    .tpl-dense{grid-template-columns:repeat(4,minmax(0,1fr));}
    .tpl-mini{grid-template-columns:repeat(5,minmax(0,1fr));}
}
@media (max-width:1100px){
    .tpl-h5{grid-template-columns:repeat(3,minmax(0,1fr));}
    .tpl-compact{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
    .tpl-dense{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;}
    .tpl-mini{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:760px){
    .tpl-h5{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .tpl-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
    .tpl-dense{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px;}
    .tpl-mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;}
    .tl-row{gap:12px;padding:12px;}
    .tl-cover{flex:0 0 112px;width:112px;}
    .tl-action{display:none;}
    .td-desc{-webkit-line-clamp:2;}
}

/* ===== 高密度列表：强制五列均分、左右与筛选栏严格贴边 ===== */
.tpl-dense{
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:22px 18px;
    width:100%;
    margin:0 0 24px;
    padding:0;
    box-sizing:border-box;
}
.tpl-dense > .td-card{
    flex:0 0 calc((100% - 72px) / 5);
    width:calc((100% - 72px) / 5);
    max-width:calc((100% - 72px) / 5);
    min-width:0;
    box-sizing:border-box;
}
@media (max-width:1200px){
    .tpl-dense > .td-card{
        flex:0 0 calc((100% - 54px) / 4);
        width:calc((100% - 54px) / 4);
        max-width:calc((100% - 54px) / 4);
    }
}
@media (max-width:900px){
    .tpl-dense{ gap:16px 12px; }
    .tpl-dense > .td-card{
        flex:0 0 calc((100% - 24px) / 3);
        width:calc((100% - 24px) / 3);
        max-width:calc((100% - 24px) / 3);
    }
}
@media (max-width:760px){
    .tpl-dense{ gap:14px 10px; }
    .tpl-dense > .td-card{
        flex:0 0 calc((100% - 10px) / 2);
        width:calc((100% - 10px) / 2);
        max-width:calc((100% - 10px) / 2);
    }
}