/* r58pn · f50.css — step 9 add-ons. Written in the site's dark source colours: light mode inverts the page (html.nslt:not(.mxdark)), so nothing here uses a light background. */
.f5i{width:20px;height:20px;flex:none}
.f5btns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.f5btns .mxbtn{display:inline-flex;align-items:center;gap:6px}
.f5h2{font-size:20px;margin:26px 0 10px}
.f5grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin:14px 0}
.f5plc{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;min-width:0}
.f5plcv{aspect-ratio:1;border-radius:12px;background:#1c1c20;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#a1a1aa}
.f5plcv img{width:100%;height:100%;object-fit:cover}.f5plcv .f5i{width:44px;height:44px}
.f5plc b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4f4f5}.f5plc small{font-size:12px;color:#a1a1aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f5plc:hover .f5plcv{outline:2px solid #3f3f46}
.f5newpl2{display:flex;gap:8px;max-width:520px;margin:12px 0}.f5newpl2 input{flex:1}
.f5plpick{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.f5plpick small{opacity:.6;margin-left:4px}
.f5rm{opacity:.6}.f5rm:hover{opacity:1}
.f5more{opacity:.75}.f5more:hover{opacity:1}
.f5alh{display:flex;gap:22px;align-items:flex-end;margin:10px 0 18px;flex-wrap:wrap}
.f5alh img{width:200px;height:200px;object-fit:cover;border-radius:14px;box-shadow:0 18px 50px -12px rgba(0,0,0,.7)}
.f5alh>div{flex:1;min-width:240px}.f5alh p{color:#a1a1aa;margin:4px 0}
.f5back{margin-bottom:6px}
/* song sheet */
.f5sheet .mxpmbox{max-width:560px;width:calc(100% - 24px)}
.f5shh{display:flex;gap:14px;align-items:center;margin-bottom:12px}.f5shh img{width:72px;height:72px;border-radius:10px;object-fit:cover}
.f5shh h3{margin:0 0 4px;font-size:18px}.f5shh p{margin:0;color:#a1a1aa}
.f5tabs{display:flex;gap:6px;margin:6px 0 12px}
.f5tabs button{border:0;border-radius:999px;padding:8px 14px;background:#232327;color:#d4d4d8;font:600 14px inherit;font-family:inherit;cursor:pointer}
.f5tabs button.on{background:#e11d48;color:#fff}
.f5pane{max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch}
.f5pane pre{white-space:pre-wrap;font:15px/1.6 inherit;font-family:inherit;margin:0;color:#e4e4e7}
.f5src{display:block;color:#71717a;margin-top:8px;font-size:12px}
.f5h4{margin:10px 0 8px;font-size:14px;color:#d4d4d8}
.f5mini{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px}
.f5mc{all:unset;cursor:pointer;width:112px;flex:none;display:flex;flex-direction:column;gap:3px}
.f5mc img{width:112px;height:112px;border-radius:10px;object-fit:cover;background:#1c1c20}
.f5mc b{font-size:12.5px;color:#f4f4f5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f5mc small{font-size:11.5px;color:#a1a1aa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f5cardv{display:flex;justify-content:center;margin:10px 0}.f5cardv img{max-width:100%;max-height:52vh;border-radius:12px}
/* radio */
.f5radio{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 10px;max-width:480px;margin:0 auto}
.f5rdisc{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#2a2a30 0 30%,#141417 31% 100%);display:flex;align-items:center;justify-content:center;color:#ef4444;box-shadow:0 0 0 10px #1c1c20}
.f5rdisc .f5i{width:60px;height:60px}.f5radio p{color:#a1a1aa}.f5rgo{font-size:17px;padding:14px 26px}
/* events */
.f5evs{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.f5ev{display:flex;gap:14px;align-items:center;background:#17171a;border:1px solid #26262b;border-radius:14px;padding:12px 14px}
.f5evd{width:56px;flex:none;text-align:center;background:#232327;border-radius:10px;padding:6px 0}.f5evd b{display:block;font-size:22px;color:#f4f4f5}.f5evd small{color:#ef4444;font-weight:700;text-transform:uppercase;font-size:11px}
.f5evt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.f5evt b{color:#f4f4f5}.f5evt small{color:#a1a1aa}
/* advertise */
.f5ads{display:flex;flex-direction:column;gap:10px;max-width:640px;margin:14px 0}
.f5ad{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#17171a;border:1px solid #26262b;border-radius:14px;padding:16px}
.f5ad b{display:block;color:#f4f4f5}.f5ad small{color:#a1a1aa}.f5price{font-weight:800;font-size:17px;color:#f4f4f5;white-space:nowrap}
.f5adc{color:#d4d4d8}.f5adc a{color:#f87171}
.f5ads .mxbtn{align-self:flex-start;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
/* quiz */
.f5qt{margin-top:14px}
.f5quiz{max-width:620px;margin:10px 0}
.f5qn{color:#a1a1aa;font-size:13px}
.f5qq{display:flex;gap:16px;align-items:center;margin:10px 0 16px}.f5qq img{width:120px;height:120px;border-radius:12px;object-fit:cover}.f5qq h3{font-size:21px;margin:0}
.f5opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f5opts .mxbtn{justify-content:center;text-align:center;min-height:54px;display:flex;flex-direction:column;align-items:center;white-space:normal}
.f5opts .mxbtn small{opacity:.65;font-weight:500;font-size:12px}
.f5opts .f5ok{background:#065f46!important;color:#fff!important}.f5opts .f5no{background:#7f1d1d!important;color:#fff!important}
.f5gq{display:flex;flex-direction:column;align-items:center;gap:8px;margin:16px 0}
.f5gplay{width:96px;height:96px;border-radius:50%;border:0;background:#ef4444;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.f5gplay .f5i{width:40px;height:40px}.f5gplay.on{animation:f5p 1s infinite}
.f5qend{text-align:center;padding:30px 0}.f5qend b{font-size:44px;display:block;color:#f4f4f5}
@keyframes f5p{50%{box-shadow:0 0 0 14px rgba(239,68,68,.25)}}
/* wallpapers */
.f5walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;margin:14px 0}
.f5wp{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:center}
.f5wp img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:14px;background:#1c1c20}
.f5wp b{font-size:13px;color:#e4e4e7}
.f5wv img{max-height:56vh}
/* home widgets */
.f5spon{margin:4px 0 18px;padding:10px 14px;border-radius:12px;background:#17171a;border:1px solid #26262b;color:#d4d4d8;font-size:14px;text-align:center}
.f5spon b,.f5spon a{color:#f4f4f5;font-weight:700}
.f5vote{display:flex;flex-direction:column;gap:8px;max-width:760px}
.f5vr{display:flex;gap:12px;align-items:center;background:#17171a;border:1px solid #26262b;border-radius:12px;padding:8px 10px}
.f5vr.f5mine{border-color:#ef4444}
.f5vr img{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none}
.f5vt{flex:1;min-width:0;display:flex;flex-direction:column}.f5vt b{color:#f4f4f5;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f5vt small{color:#a1a1aa;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f5vbar{height:6px;border-radius:6px;background:#26262b;margin-top:5px;overflow:hidden}.f5vbar i{display:block;height:100%;background:#ef4444}
.f5vp{font-weight:800;color:#f4f4f5;min-width:44px;text-align:right}
.f5vb{display:inline-flex;gap:5px;align-items:center;padding:7px 12px}
.f5vn{color:#71717a;font-size:12.5px;margin:4px 2px}
.f5nbox{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#17171a;border:1px solid #26262b;border-radius:16px;padding:18px 20px}
.f5nbox>div{display:flex;flex-direction:column;gap:4px;max-width:460px}.f5nbox b{color:#f4f4f5;font-size:17px}.f5nbox small{color:#a1a1aa}.f5nic{color:#ef4444;width:26px;height:26px}
.f5nbox form{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-width:260px;max-width:440px}.f5nbox input{flex:1;min-width:180px}.f5nbox .mxpmsg{flex-basis:100%;margin:0}
.mxpp.f5pulse{animation:f5p 1.1s infinite}
.f5ios{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:10px;align-items:center;background:#1c1c20;color:#f4f4f5;border:1px solid #2e2e34;border-radius:14px;padding:12px 14px;box-shadow:0 12px 40px rgba(0,0,0,.5);transform:translateY(30px);opacity:0;transition:.35s}
.f5ios.on{transform:none;opacity:1}.f5ios span{flex:1;font-size:13.5px;color:#d4d4d8}.f5ios svg{vertical-align:-3px}.f5ios button{all:unset;cursor:pointer;font-size:22px;padding:0 4px;color:#a1a1aa}
/* the Zing home card */
.mxslide.mxhlink{cursor:pointer}
.mxslide.mxhlink .mxview{text-decoration:none;display:inline-flex;align-items:center}
@media (max-width:640px){.f5alh img{width:140px;height:140px}.f5qq img{width:84px;height:84px}.f5qq h3{font-size:18px}.f5grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}}

/* New Songs: big cards (avrumi Oct 22 12:34 AM "make it big and add a play button download button add to playlist button lyrics button") */
.yxlist.f5big{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:8px}
.yxlist.f5big .yxs{display:flex!important;flex-direction:column;align-items:stretch;gap:8px;height:auto!important;padding:10px!important;border-radius:16px;background:#151518;border:1px solid #232327;position:relative}
.yxlist.f5big .yxs .yxart{width:100%!important;height:auto!important;aspect-ratio:1;flex:none;border-radius:12px;overflow:hidden;position:relative}
.yxlist.f5big .yxs .yxart img{width:100%!important;height:100%!important;object-fit:cover;border-radius:12px}
.yxlist.f5big .yxs .yxpl{transform:scale(1.6)}
.yxlist.f5big .yxs .yxt{display:flex;flex-direction:column;gap:3px;min-width:0;padding:0 2px}
.yxlist.f5big .yxs .yxt b{font-size:16px;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yxlist.f5big .yxs .yxt small{display:flex;flex-direction:column;gap:1px;font-size:13.5px;white-space:normal}
.yxlist.f5big .yxs .yxt small span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yxlist.f5big .yxs .yxlk,.yxlist.f5big .yxs .yxwait{position:absolute;top:18px;right:18px}
.f5nb{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.f5b{display:flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:10px;padding:8px 6px;background:#26262b;color:#f4f4f5;font:600 13px inherit;font-family:inherit;cursor:pointer}
.f5b:hover{background:#34343a}.f5b .f5i{width:17px;height:17px}.f5b[disabled]{opacity:.4;cursor:default}
.f5b.f5bp{background:#e11d48;color:#fff}
html.nssel .f5nb{display:none}
@media (max-width:640px){.yxlist.f5big{grid-template-columns:1fr 1fr;gap:10px}.yxlist.f5big .yxs{padding:8px!important}.yxlist.f5big .yxs .yxt b{font-size:14.5px}.f5b span{font-size:12px}.f5b{padding:8px 4px}}
#ytmhome .yxshelf .yxa{width:180px}#ytmhome .yxshelf .yxa .yxac,#ytmhome .yxshelf .yxa img{width:180px!important;height:180px!important}

.f5b.f5by{text-decoration:none;background:#2a2a30}
#ytmhome .yxshelf.f5agrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;overflow:visible}
#ytmhome .yxshelf.f5agrid .yxa{width:auto}#ytmhome .yxshelf.f5agrid .yxa .yxac,#ytmhome .yxshelf.f5agrid .yxa img{width:100%!important;height:auto!important;aspect-ratio:1}
.f5seeall{margin-left:auto}
@media (max-width:640px){#ytmhome .yxshelf.f5agrid{grid-template-columns:1fr 1fr}#ytmhome .yxshelf .yxa{width:150px}#ytmhome .yxshelf .yxa .yxac,#ytmhome .yxshelf .yxa img{width:150px!important;height:150px!important}}
#ytmhome .yxshelf .yxa img.f5ac{object-fit:cover}

/* the whole site matches the New Songs cards: same radius, card colour and button style on song rows and song cards */
.mxlist1 .mxtr{border-radius:14px}
.mxlist1 .mxtr:hover{background:#151518}
.mxtr .mxtrc img{border-radius:10px}
.f5rb{display:inline-flex;gap:6px;margin:0 4px;flex:none}
.f5rb .f5b{padding:6px 10px;font-size:12.5px}
.mxpcard .mxrc,.mxrel .mxrc{border-radius:14px;overflow:hidden}
.mxpcard b,.mxrel b{font-size:14.5px}
html.mxpsel .f5rb,html.nssel .f5rb{display:none}
@media (max-width:640px){.f5rb .f5b span{display:none}.f5rb .f5b{padding:7px}}
#ytmhome .yxshelf .yxa[data-f5x]:not(:has(img.vgok)){display:none}
.f5nb .f5by{grid-column:1/-1;text-align:center;font-size:12px;color:#a1a1aa;text-decoration:none;padding:2px 0}.f5nb .f5by:hover{color:#f4f4f5}
.f5tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:14px 0}.f5tool{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#17171a;border:1px solid #26262b;border-radius:14px;padding:14px}.f5tool b{color:#f4f4f5;font-size:14.5px}.f5soon{flex:none;font-size:11.5px;font-weight:700;color:#5eead4;background:#0f2e2b;border-radius:999px;padding:3px 9px}
/*f51*/
.f51p{background:#111d1b;border:1px solid #1f3d39;border-radius:18px;padding:16px 16px 6px;margin:14px 0 6px}
.f51h{font-size:18px;margin:0 0 10px;color:#f4f4f5}
.f51g{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.f51c{display:flex;flex-direction:column;gap:5px;background:#17171a;border:1px solid #26262b;border-radius:14px;padding:13px 14px}
.f51c b{color:#f4f4f5;font-size:15.5px}.f51c b small{font-size:12px;font-weight:600;color:#a1a1aa;margin-left:1px}.f51c span{color:#a1a1aa;font-size:13px}
.f51best{border-color:#2dd4bf}.f51best b{color:#5eead4}
.f51n{color:#d4d4d8;font-size:14px;margin:12px 0 8px}.f51n a{color:#f87171;font-weight:700}
/*/f51*/