.genre-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:18px 0}
.genre-folder{position:relative;display:flex;flex-direction:column;min-height:145px;justify-content:space-between;padding:20px 16px;border:1px solid rgba(170,190,255,.25);border-radius:16px;background:linear-gradient(145deg,#273961,#1c2643 70%,#211d42);box-shadow:0 8px 26px #0002;color:#f5f8ff;transition:transform .17s, border-color .17s}
.genre-folder:hover{transform:translateY(-2px);border-color:#81afff;color:#fff}
.genre-folder:before{content:'📁';font-size:32px;line-height:1.2;opacity:.92}
.genre-folder:nth-child(3n+2){background:linear-gradient(145deg,#37295f,#231e48)}
.genre-folder:nth-child(3n){background:linear-gradient(145deg,#134656,#182b45)}
.genre-folder strong{font-size:15px;display:block;margin-top:13px;line-height:1.3}
.genre-folder small{font-size:12px;color:#b5c9e4;margin-top:4px}
.genre-back{margin-bottom:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.genre-current{color:#dbe4fa;font-size:13px}.genre-search{margin:16px 0}
@media(max-width:580px){.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.genre-folder{min-height:135px;padding:15px}.genre-folder strong{font-size:14px}}