/* skin/css/index.css */

/* Banner */
.banner-box { margin-bottom: 25px; }
.main-swiper { border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--shadow-float); }
.swiper-pagination-bullet-active { background: var(--primary-color); }

/* 1. 横向滚动图标 */
.app-icon-col {
    flex: 0 0 64px; text-align: center;
}
.app-icon-col img {
    width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.app-icon-col span { font-size: 12px; color: var(--text-main);    height: 38px;
    display: block;
    overflow: hidden; }

/* 2 & 4. 列表项 */
.list-group { padding: 5px 15px; }
.list-row {
    display: flex; align-items: center; padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.list-row:last-child { border-bottom: none; }
.list-row img { width: 50px; height: 50px; border-radius: 12px; margin-right: 15px; }
.list-row.small img { width: 40px; height: 40px; border-radius: 10px; } /* 小列表 */
.lr-info { flex: 1; }
.lr-info h3 { font-size: 15px; font-weight: bold; margin-bottom: 3px; }
.lr-info p { font-size: 12px; color: var(--text-sub); }

/* 3 & 5. 4列网格 */
.grid-4col {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 15px; padding: 15px;
}
.grid-cell {     text-align: center;
    display: block;
    overflow: hidden;
    width: 100%; }
.grid-cell img { width: 40px; height: 40px; border-radius: 10px; margin: 0 auto 5px; }
.grid-cell span {     font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;}

/* 6. 排行榜 */
.rank-home-box { padding: 5px 15px; }
.rank-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px dashed #eee; }
.rank-row:last-child { border-bottom: none; }
.rr-num { width: 24px; text-align: center; font-weight: bold; color: #ccc; margin-right: 10px; }
.rr-num.top { color: var(--primary-color); font-size: 16px; }
.rr-name { flex: 1; font-weight: 500; font-size: 14px; }
.rr-hot { font-size: 12px; color: #999; }