/* skin/css/download.css */

.detail-card {
    background: #fff; 
    border: 3px solid #000; 
    border-radius: 12px; 
    padding: 20px;
    box-shadow: 5px 5px 0 var(--pop-blue);
    margin-bottom: 20px;
}
.dc-flex { display: flex; margin-bottom: 20px; }
.dc-icon { 
    width: 80px; height: 80px; 
    border: 2px solid #000; 
    border-radius: 10px; 
    margin-right: 15px; 
}
.dc-txt h1 { font-size: 20px; font-weight: 900; margin-bottom: 5px; }
.dc-txt p { font-size: 12px; color: #666; margin-bottom: 5px; font-weight: bold; }
.dc-tags span { 
    background: #000; color: #fff; 
    font-size: 10px; padding: 2px 6px; 
    margin-right: 5px; 
}
.screenshot-swiper{
    overflow: hidden !important;
}
.btn-pop.big { width: 100%; font-size: 16px; padding: 12px; display: block;
 text-align: center; }
.safe-mark { 
    text-align: center; font-size: 12px; 
    margin-top: 10px; font-weight: bold; 
    color: #00b894; 
}

/* Swiper 预览 */
.screenshot-swiper { overflow: visible; padding-bottom: 10px; }
.swiper-slide { 
    width: auto; height: auto; 
    border: 3px solid #000; 
    border-radius: 8px; 
    overflow: hidden; 
}
.video-slide video, .swiper-slide img { width: auto; height: auto; max-width: 500px; max-height: 500px; object-fit: cover; }
.video-slide video { background: #000; }

/* 简介正文 */
.detail-article {
    background: #fff; border: 3px solid #000; padding: 20px; border-radius: 12px;
}
.detail-article h3 { 
    background: var(--pop-yellow); border: 2px solid #000; 
    display: inline-block; padding: 4px 10px; 
    margin: 20px 0 10px; font-weight: 900; 
    box-shadow: 2px 2px 0 #000; 
}
.detail-article h4 { 
    border-bottom: 2px dashed #000; padding-bottom: 5px; 
    margin: 15px 0 5px; font-weight: bold; 
}
.detail-article p { font-size: 14px; line-height: 1.6; margin-bottom: 10px; }

/* --- 修复：相关推荐样式 (从首页移植过来) --- */
.comic-grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    gap: 10px; 
    padding: 0 5px;
}
.cg-item {
    background: #fff; 
    border: 2px solid #000;
    border-radius: 10px; 
    padding: 8px 4px;
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    text-decoration: none;
    transition: transform 0.1s;
}
.cg-item:active { transform: scale(0.95); }
.cg-item img { 
    width: 40px; height: 40px; 
    border: 2px solid #000; 
    border-radius: 50%; 
    margin-bottom: 5px; 
}
.cg-item span { 
    font-size: 11px; 
    font-weight: bold; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%;
}