/* 1225: Audio, varianta D (Acasa / Exploreaza / Biblioteca) + cardul Audio de pe hub */

/* ---- hub: cardul Audio, mic si discret (1226) ---- */
#hubAudio{margin:16px 0 4px}
.hubAu{border-radius:var(--r-chip,18px); overflow:hidden; cursor:pointer; position:relative;
  box-shadow:0 6px 16px rgba(20,16,40,.16); transition:transform .18s ease}
.hubAu:active{transform:translateY(-2px)}
.hubAuArt{position:relative; height:92px; background:#141a33 url(../img/hub-audio.webp) 72% 58%/cover no-repeat}
.hubAuArt:before{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,18,40,.9) 0%, rgba(14,18,40,.72) 48%, rgba(14,18,40,.1) 85%)}
.hubAuTx{position:absolute; left:16px; top:0; bottom:0; right:64px; display:flex; flex-direction:column; justify-content:center; color:#f5efe4}
.hubAuTx b{font-family:var(--font-title); font-weight:700; font-size:21px; line-height:1; margin-bottom:5px}
.hubAuTx span{font-size:11.5px; line-height:1.4; opacity:.85; max-width:250px}
.hubAuArr{position:absolute; right:14px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:rgba(245,239,228,.18); color:#f5efe4; display:flex; align-items:center; justify-content:center}
/* tile-ul vechi Audio din grila nu mai apare: Audio are cardul lui */
#toolGrid .tool[data-id="music"]{display:none}

/* ---- sus: file + cautare ---- */
/* 1229: trei butoane separate, la fel ca Suflet / Minte / Corp */
#muTop2 .catBar.mudTabs{gap:8px; margin:0 0 12px !important}
#s-music .catBar.mudTabs .cTab{white-space:nowrap; padding:8px 6px !important}
.mudSearch{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:0 12px; margin:0 0 12px}
.mudSearch svg{opacity:.55; flex-shrink:0}
.mudSearch input{flex:1; min-width:0; background:none; border:0; outline:0; color:inherit; font:inherit; font-size:13.5px; padding:11px 0}
.mudSearch input::placeholder{color:inherit; opacity:.45}
.mudSearch input::-webkit-search-cancel-button{display:none}
.mudSearch b{cursor:pointer; opacity:.6; font-size:13px; padding:4px}

/* ---- sectiuni ---- */
.mudHi{font-family:var(--font-title); font-size:23px; line-height:1.2; margin:4px 0 12px}
.mudSecH{display:flex; justify-content:space-between; align-items:baseline; margin:22px 0 10px}
.mudSecH b{font-family:var(--font-title); font-weight:700; font-size:17px}
.mudSecH span{font-size:12px; color:var(--catB,#f5c76a); cursor:pointer}
.mudRow{display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin:0 -2px}
.mudRow::-webkit-scrollbar{display:none}
.mudTile{flex:none; width:128px; cursor:pointer}
.mudIm{width:128px; height:128px; border-radius:16px; background-size:cover; background-position:center; position:relative; box-shadow:0 6px 16px rgba(0,0,0,.25)}
.mudTile.live .mudIm{outline:2px solid var(--catB,#f5c76a)}
.mudTile .muAlEq{position:absolute; right:8px; bottom:8px}
.mudTile b{display:block; font-size:12.5px; line-height:1.3; margin-top:7px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mudTile small{display:block; font-size:10.5px; opacity:.6; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- Continua ---- */
.mudBig{display:flex; gap:12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:12px; cursor:pointer}
.mudBigIm{width:104px; height:104px; flex-shrink:0; border-radius:14px; background-size:cover; background-position:center}
.mudBigTx{flex:1; min-width:0; display:flex; flex-direction:column}
.mudK{font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--catB,#f5c76a)}
.mudBigTx b{font-family:var(--font-title); font-size:16px; line-height:1.25; margin:4px 0 2px}
.mudBigTx small{font-size:11px; opacity:.65; line-height:1.4}
.mudBtn{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:10px; background:var(--catB,#f5c76a); color:#1a1422; font-weight:700; font-size:12px; padding:7px 13px; border-radius:99px}
.mudDots{display:flex; gap:4px; margin-top:8px}
.mudDots i{width:20px; height:20px; border-radius:50%; font-style:normal; font-size:9.5px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); opacity:.8}
.mudDots i.d{background:var(--catB,#f5c76a); color:#1a1422; opacity:1}
.mudDots i.c{outline:2px solid var(--catB,#f5c76a); opacity:1}
.mudMore{text-align:center; margin:26px 0 10px; font-size:13px; font-weight:600; color:var(--catB,#f5c76a); cursor:pointer}

/* ---- Exploreaza ---- */
.mudChars{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px}
.mudChars::-webkit-scrollbar{display:none}
.mudChars{justify-content:space-between; gap:0; padding:12px 10px 6px; margin:0 -2px}
.mudCh{flex:none; width:58px; text-align:center; font-size:11px; cursor:pointer}
.mudCh i{display:block; width:56px; height:56px; margin:0 auto 5px; border-radius:50%; background-size:cover; background-position:center; border:2px solid var(--c); transition:transform .18s ease, box-shadow .18s ease}
.mudCh span{display:inline-block; padding:1px 7px; border-radius:99px; transition:background .18s ease}
/* 1228: cel ales e marcat clar, ceilalti raman vizibili */
.mudCh.on i{transform:scale(1.06); box-shadow:0 0 0 3px #141a33, 0 0 0 5.5px var(--c), 0 6px 16px rgba(0,0,0,.35)}
.mudCh.on span{background:var(--c); color:#141a33; font-weight:700}
.mudNeeds{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.mudNeed{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:6px 6px 11px; cursor:pointer; overflow:hidden}
.mudNeed i{display:block; aspect-ratio:4/3; border-radius:12px; background:#141a33 center/cover no-repeat; margin-bottom:8px}
.mudNeed b{display:block; font-family:var(--font-title); font-size:15px; padding:0 5px}
.mudNeed small{display:block; font-size:10.5px; opacity:.62; margin-top:2px; padding:0 5px}
.mudChips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 8px}
.mudChips::-webkit-scrollbar{display:none}
.mudChip{flex:none; font-size:12px; padding:7px 11px; border-radius:99px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); cursor:pointer; white-space:nowrap}
.mudChip.on{background:#f5efe4; color:#141a33; border-color:transparent; font-weight:700}
.mudBack{font-size:12.5px; opacity:.7; cursor:pointer; margin:0 0 6px}
.mudZones{display:flex; gap:6px; margin:0 0 4px}
.mudZones .cTab{flex:1}
.mudEmpty{opacity:.6; line-height:1.55; font-size:13px; text-align:center; margin:18px 8px}

/* ---- liste ---- */
.mudLi{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer}
.mudLiIm{width:54px; height:54px; border-radius:12px; flex-shrink:0; background-size:cover; background-position:center}
.mudLiTx{flex:1; min-width:0}
.mudLiTx b{display:block; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mudLiTx small{display:block; font-size:11px; opacity:.6; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mudLiR{font-size:11px; opacity:.65; white-space:nowrap}

/* ---- Biblioteca ---- */
.mudSeg{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:0 0 8px}
.mudSeg::-webkit-scrollbar{display:none}
.mudSeg span{flex:none; font-size:12px; padding:8px 12px; border-radius:99px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); cursor:pointer}
.mudSeg span.on{background:#f5efe4; color:#141a33; font-weight:700; border-color:transparent}

/* ---- inima din playerul mare ---- */
.mudFavB{width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.1); color:inherit; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; margin-right:6px}
.mudFavB.on{color:#ff8fb1}

/* ---- 1228: rezultate, bara cu filtre + grila/lista ---- */
.mudHiR{margin:14px 0 10px}
.mudBar{display:flex; align-items:center; gap:10px; margin:0 0 12px}
.mudFiltB{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; padding:8px 13px; border-radius:99px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); cursor:pointer; white-space:nowrap}
.mudFiltB.on{border-color:var(--catB,#f5c76a)}
.mudFiltB em{font-style:normal; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--catB,#f5c76a); color:#141a33; font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.mudCnt{flex:1; font-size:11.5px; opacity:.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mudVw{display:flex; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:11px; padding:2px}
.mudVw i{width:34px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; opacity:.55; cursor:pointer}
.mudVw i.on{background:rgba(255,255,255,.16); opacity:1}

/* grila */
.mudGrid{display:grid; grid-template-columns:1fr 1fr; gap:16px 12px}
.mudGrid .mudTile{width:auto}
.mudGrid .mudIm{width:100%; height:auto; aspect-ratio:1/1}
.mudGrid .mudTile small+small{margin-top:1px}

/* lista in stil YouTube: thumbnail mare, textul langa el */
.mudYt{display:flex; gap:12px; align-items:flex-start; margin:0 0 14px; cursor:pointer}
.mudYtIm{position:relative; width:40%; flex-shrink:0; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#0e1228 center/cover no-repeat}
.mudYtIm .muAlEq{position:absolute; right:8px; bottom:8px}
.mudYt.live .mudYtIm{outline:2px solid var(--catB,#f5c76a)}
.mudYtTx{flex:1; min-width:0; padding-top:1px}
.mudYtTx b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.3; margin-bottom:4px}
.mudYtTx small{display:block; font-size:11.5px; line-height:1.45; opacity:.62; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* pop-up filtre (foaie de jos) */
#mudSheet{position:fixed; inset:0; z-index:9000; pointer-events:none}
#mudSheet.on{pointer-events:auto}
.mudShBg{position:absolute; inset:0; background:rgba(8,10,24,.55); opacity:0; transition:opacity .2s ease}
#mudSheet.on .mudShBg{opacity:1}
.mudSh{position:absolute; left:0; right:0; bottom:0; max-width:560px; margin:0 auto; max-height:82vh; overflow-y:auto; background:#1b2143; color:#f5efe4; border-radius:22px 22px 0 0; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(100%); transition:transform .22s ease; box-shadow:0 -10px 30px rgba(0,0,0,.35)}
#mudSheet.on .mudSh{transform:none}
.mudShH{display:flex; justify-content:space-between; align-items:center; margin:0 0 6px}
.mudShH b{font-family:var(--font-title); font-size:19px}
.mudShH span{width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:13px}
.mudShS{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.6; margin:14px 0 8px}
.mudSh .mudChips{flex-wrap:wrap; overflow:visible}
.mudShF{display:flex; gap:10px; margin-top:20px}
.mudShR{flex:none; padding:12px 16px; border-radius:99px; border:1px solid rgba(255,255,255,.2); font-size:13px; font-weight:600; cursor:pointer}
.mudShGo{flex:1; text-align:center; padding:12px 16px; border-radius:99px; background:var(--catB,#f5c76a); color:#141a33; font-size:13.5px; font-weight:800; cursor:pointer}

/* ---- 1229 ---- */
/* continutul incepe sub umbra de sus a zonei care se deruleaza */
body.muPage #muScroll{padding-top:30px}

/* piesele ca niste carduri albe separate: poza + titlu + descriere */
.mudRow{align-items:stretch; padding:2px 2px 10px}
.mudTile{background:#fff; color:#1d1832; border-radius:16px; overflow:hidden; box-shadow:0 6px 16px rgba(0,0,0,.2); display:flex; flex-direction:column}
.mudTile .mudIm{border-radius:0; box-shadow:none}
.mudTile b{margin:0; padding:9px 10px 0; color:#1d1832}
.mudTile small{padding:0 10px; opacity:1; color:#6d6682}
.mudTile small:last-child{padding-bottom:11px}
.mudTile.live{outline:2px solid var(--catB,#f5c76a); outline-offset:2px}
.mudTile.live .mudIm{outline:0}

.mudYt{background:#fff; color:#1d1832; border-radius:16px; padding:8px; box-shadow:0 6px 16px rgba(0,0,0,.2); margin:0 0 12px; align-items:stretch}
.mudYt.live{outline:2px solid var(--catB,#f5c76a); outline-offset:2px}
.mudYt.live .mudYtIm{outline:0}
.mudYtTx{padding:4px 4px 2px 0; display:flex; flex-direction:column}
.mudYtTx b{color:#1d1832; font-size:15px}
.mudYtTx small{opacity:1; color:#6d6682}

.mudLi{background:#fff; color:#1d1832; border-radius:16px; padding:8px; margin:0 0 10px; border-bottom:0; box-shadow:0 6px 16px rgba(0,0,0,.18)}
.mudLiTx b{color:#1d1832}
.mudLiTx small{opacity:1; color:#6d6682}
.mudLiR{opacity:1; color:#6d6682; padding-right:6px}

/* pop-up: grila egala de butoane */
.mudSh .mudChips.mudG4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; overflow:visible; margin:0}
.mudSh .mudG4 .mudChip{display:flex; align-items:center; justify-content:center; text-align:center; white-space:normal; min-height:48px; padding:6px 4px; line-height:1.2; font-size:11.5px; border-radius:14px; min-width:0; overflow-wrap:anywhere; hyphens:auto}

/* ---- 1230 ---- */
/* fara titlul "Audio": pastila urca sub bara de sus, acelasi spatiu pana la ea ca de la ea la cautare */
body.muPage #s-music .hero{display:none}
body.muPage #s-music #muBody{margin-top:29.5px !important}

/* pastila unica: cea aleasa arata cuvantul, celelalte doar iconita; fundalul aluneca */
#muTop2 .mudPill{position:relative; display:flex; height:48px; padding:4px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); margin:0 0 14px}
#muTop2 .mudPillInd{position:absolute; top:4px; bottom:4px; left:calc(4px + var(--i,0) * 56px); width:calc(100% - 8px - 112px); border-radius:999px; background:#f5efe4; box-shadow:0 4px 12px rgba(0,0,0,.22);
  transition:left .42s cubic-bezier(.33,.9,.3,1) !important}
#muTop2 .mudPB{position:relative; z-index:1; flex:0 0 56px; min-width:0; border:0; background:none; color:inherit; padding:0; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; white-space:nowrap; font-family:var(--font-body); font-size:14px; font-weight:700; opacity:.72;
  -webkit-tap-highlight-color:transparent; transition:flex-grow .42s cubic-bezier(.33,.9,.3,1), color .3s ease, opacity .3s ease !important}
#muTop2 .mudPB.on{flex-grow:1; color:#141a33; opacity:1}
#muTop2 .mudPB svg{flex-shrink:0}
#muTop2 .mudPB span{max-width:0; opacity:0; overflow:hidden; transition:max-width .42s cubic-bezier(.33,.9,.3,1), opacity .25s ease !important}
#muTop2 .mudPB.on span{max-width:160px; opacity:1; transition:max-width .42s cubic-bezier(.33,.9,.3,1), opacity .3s ease .12s !important}
#muTop2 .mudSearch{margin-bottom:12px}

/* carduri: textul peste poza, doua randuri, gradient discret */
.mudTile{background:none; color:#fff; box-shadow:0 8px 18px -8px rgba(0,0,0,.55); display:block}
.mudTile .mudIm{position:relative; border-radius:16px; overflow:hidden}
.mudGrid .mudTile .mudIm{border-radius:16px}
.mudTile .mudIm:after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,14,32,.82) 0%, rgba(12,14,32,.42) 32%, rgba(12,14,32,0) 58%); pointer-events:none}
.mudOv{position:absolute; left:10px; right:10px; bottom:9px; z-index:1; display:block; text-align:left}
.mudTile .mudOv>b{display:block; margin:0; padding:0; color:#fff; font-size:13px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset}
.mudTile .mudOv small{display:block; margin:2px 0 0; padding:0; color:rgba(255,255,255,.8); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mudTile .muAlEq{top:8px; right:8px; bottom:auto; z-index:2}
.mudGrid .mudTile .mudOv{left:12px; right:12px; bottom:11px}
.mudGrid .mudTile .mudOv>b{font-size:14px}
.mudOv small b, .mudOv small span{display:inline; font:inherit; color:inherit; margin:0; padding:0; background:none; box-shadow:none}
.mudGrid .mudTile .mudOv small{font-size:11px}

/* ---- 1231: cercul ales intreg (nu mai iese din zona care se deruleaza) + clipul "hello" ---- */
.mudCh i{position:relative; overflow:hidden; background-color:#1b2143}
.mudCh video{position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; border-radius:50%; pointer-events:none; background:transparent}

/* ---- 1232 ---- */
/* personajul ales: fara cerc, doar mai mare cu 10%; ceilalti mai mici cu 10% si putin stersi */
.mudCh i{transition:transform .25s ease, opacity .25s ease !important}
.mudCh.on i{transform:scale(1.1); box-shadow:0 6px 14px rgba(0,0,0,.3)}
.mudCh.on span{background:none; color:inherit; font-weight:700}
.mudChars.sel .mudCh:not(.on) i{transform:scale(.9); opacity:.8}
.mudChars.sel .mudCh:not(.on) span{opacity:.8}

/* lista si cautarea: carduri semi-transparente, ca "Continua" de pe Acasa */
.mudYt, .mudLi{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:inherit; box-shadow:none; border-radius:18px}
.mudYtTx b, .mudLiTx b{color:inherit}
.mudYtTx small, .mudLiTx small, .mudLiR{color:inherit; opacity:.65}

/* Spoken Word pe personaje */
.mudVoH{display:flex; align-items:center; gap:9px; margin:18px 0 0}
.mudVoH i{width:28px; height:28px; border-radius:50%; background:center/cover no-repeat; border:1.5px solid; flex-shrink:0}
.mudVoH b{font-family:var(--font-title); font-weight:700; font-size:16px}
.mudVoH+.muColRow{margin-top:8px}

/* ---- 1233 ---- */
/* player: titlul pe toata latimea, maxim 2 randuri; iconitele coboara pe randul subtitlului */
.muNowHead{display:grid !important; grid-template-columns:minmax(0,1fr) repeat(5, auto); column-gap:0; row-gap:8px; align-items:center}
.muNowHead .muNowInfo{display:contents}
.muNowHead #muNowTi{grid-column:1 / -1; grid-row:1; font-size:22px; line-height:1.22; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance}
.muNowHead #muNowSu{grid-column:1; grid-row:2; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.muNowHead > button{grid-row:2; margin-left:8px}
.muNowHead > button[hidden]{display:none !important}
/* regula pentru toate titlurile din Audio: maxim 2 randuri */
.muNowRTx b, .muMeta b, .mudBigTx b, .mudYtTx b, .mudLiTx b, .muColTile span{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.muColTile span small{display:block}

/* ---- 1234 ---- */
/* pastila generica (sus + Biblioteca): cate iconite sunt, atat se scade din latimea fundalului */
.mudPill{position:relative; display:flex; height:48px; padding:4px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13); margin:0 0 14px}
#muTop2 .mudPillInd, .mudPillInd{position:absolute; top:4px; bottom:4px; left:calc(4px + var(--i,0) * 56px); width:calc(100% - 8px - (var(--n,3) - 1) * 56px); border-radius:999px; background:#f5efe4; box-shadow:0 4px 12px rgba(0,0,0,.22);
  transition:left .42s cubic-bezier(.33,.9,.3,1) !important}
.mudPB{position:relative; z-index:1; flex:0 0 56px; min-width:0; border:0; background:none; color:inherit; padding:0; border-radius:999px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; white-space:nowrap; font-family:var(--font-body); font-size:14px; font-weight:700; opacity:.72;
  -webkit-tap-highlight-color:transparent; transition:flex-grow .42s cubic-bezier(.33,.9,.3,1), color .3s ease, opacity .3s ease}
.mudPB.on{flex-grow:1; color:#141a33; opacity:1}
.mudPB svg{flex-shrink:0}
.mudPB span{max-width:0; opacity:0; overflow:hidden; transition:max-width .42s cubic-bezier(.33,.9,.3,1), opacity .25s ease}
.mudPB.on span{max-width:170px; opacity:1; transition:max-width .42s cubic-bezier(.33,.9,.3,1), opacity .3s ease .12s}
.mudSeg{display:none}

/* "← Exploreaza" ca separatorii de categorii de pe Acasa */
.mudBack.deepSep{cursor:pointer; margin:0 0 4px; opacity:1}
.mudBack.deepSep b{white-space:nowrap}

/* cardul ales (in redare): conturul sta inauntru, nu mai e taiat de marginea randului */
.mudTile.live, .mudYt.live{outline:2px solid var(--catB,#f5c76a); outline-offset:-2px}
.muColTile.live:after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 2px var(--fvPillLine,#c4b5fd); pointer-events:none; z-index:3}

/* Ce ai nevoie acum?: poza taiata 1:1, textul peste ea, gradient mov discret ca la colectii */
.mudNeed{position:relative; aspect-ratio:1/1; padding:0; border:0; background:none; border-radius:var(--r-box,16px); overflow:hidden; box-shadow:0 8px 22px -10px rgba(0,0,0,.6)}
.mudNeed i{position:absolute; inset:0; aspect-ratio:auto; margin:0; border-radius:0; background:#141a33 center/cover no-repeat}
.mudNeed:after{content:""; position:absolute; inset:0; background:linear-gradient(to top, color-mix(in srgb, var(--cat, #a78bfa) 45%, rgba(0,0,0,.72)) 0%, transparent 62%); pointer-events:none}
.mudNOv{position:absolute; left:12px; right:10px; bottom:11px; z-index:1; text-align:left}
.mudNeed .mudNOv b{display:block; padding:0; font-family:var(--font-title); font-size:17px; line-height:1.2; color:#fff}
.mudNeed .mudNOv small{display:block; padding:0; margin-top:2px; font-size:11px; line-height:1.35; color:rgba(255,255,255,.82); opacity:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Biblioteca */
.mudNewB{font-size:12.5px; font-weight:700; padding:7px 12px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); cursor:pointer; white-space:nowrap}
.mudNewBig{border:1.5px dashed rgba(255,255,255,.3); border-radius:18px; padding:26px 12px; text-align:center; font-weight:700; cursor:pointer; opacity:.85; margin-top:6px}
.mudEd{position:absolute; top:8px; right:8px; z-index:2; width:32px; height:32px; border-radius:50%; border:0; background:rgba(12,14,32,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer}
.mudYt{position:relative}
.mudYt > .mudEd{top:50%; transform:translateY(-50%); right:10px; background:rgba(255,255,255,.1)}
.mudYt:has(> .mudEd) .mudYtTx{padding-right:40px}