/* skin/css/index.css */

/* Banner */
.banner-leaf {
    padding: 10px 0; margin-bottom: 20px;
}
.main-swiper {
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.swiper-pagination-bullet-active { background: var(--zen-green); }

/* List Item */
.row-item {
    display: flex; align-items: center; padding: 10px;
}
.row-item img {
    width: 60px; height: 60px; border-radius: 12px; margin-right: 15px;
}
.ri-info { flex: 1; }
.ri-info h3 { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.ri-info p { font-size: 12px; color: var(--zen-sub); }

/* Grid 4 */
.grid-4-box {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;
    padding: 20px 15px;
}
.g4-item { text-align: center; }
.g4-item img {
    width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 5px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.g4-item span { font-size: 11px; color: var(--zen-text); }

/* Simple List */
.simple-list { padding: 10px 15px; }
.sl-row {
    display: flex; align-items: center; padding: 10px 0;
    border-bottom: 1px dashed #eee;
}
.sl-row:last-child { border-bottom: none; }
.sl-row img { width: 36px; height: 36px; border-radius: 8px; margin-right: 12px; }
.sl-info { flex: 1; }
.sl-info h4 { font-size: 14px; font-weight: bold; }
.sl-info p { font-size: 11px; color: var(--zen-sub); }

/* Rank */
.rank-home { padding: 10px 15px; }
.rank-r {
    display: flex; align-items: center; padding: 10px 0;
    border-bottom: 1px solid #f9f9f9;
}
.rank-r:last-child { border-bottom: none; }
.rn {
    width: 24px; text-align: center; font-weight: bold; color: #ccc; margin-right: 10px;
}
.rn.top { color: var(--zen-green); font-size: 16px; }
.r-name { flex: 1; font-weight: bold; font-size: 14px; }
.r-hot { font-size: 10px; color: #fff; background: var(--zen-sub); padding: 1px 4px; border-radius: 4px; }