.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;padding:20px 0;}
.genre-card{position:relative;height:100px;background:#1a1a1a;border:1px solid #333;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-decoration:none;transition:all .3s;overflow:hidden;}
.genre-card .genre-name{font-size:18px;font-weight:600;color:#eee;z-index:2;}
.genre-card .genre-count{font-size:12px;color:#e91e63;margin-top:8px;opacity:.8;z-index:2;}
.genre-card .hover-glow{position:absolute;width:100%;height:100%;background:radial-gradient(circle at center,rgba(233,30,99,.1) 0%,transparent 70%);opacity:0;transition:opacity .3s;}
.genre-card:hover{border-color:#e91e63;transform:translateY(-5px);background:#252525;}
.genre-card:hover .hover-glow{opacity:1;}
.genre-card:hover .genre-name{color:#fff;}
.genre-list-header{text-align:center;padding:30px 0 10px;color:#fff;}
.genre-list-header h1{font-size:28px;color:#e91e63;}
.genre-list-header p{color:#888;margin-top:8px;}
.genre-detail-page{padding:40px 20px;background:#0f0f0f;}
.genre-detail-header{margin-bottom:30px;}
.genre-detail-header h1{color:#fff;font-size:28px;margin-top:10px;}
.genre-detail-header .breadcrumb{font-size:14px;color:#888;}
.genre-detail-header .breadcrumb a{color:#888;text-decoration:none;}
.genre-detail-header .breadcrumb a:hover{color:#e91e63;}
.genre-detail-header .breadcrumb .sep{margin:0 8px;}
.genre-detail-header .breadcrumb .current{color:#e91e63;}