/* Favorites are a first-class library feature, not a hidden player-only action. */
.favorite-hub{
  width:100%;min-height:76px;margin:4px 0 14px;padding:10px 12px;
  display:grid;grid-template-columns:48px minmax(0,1fr) auto 18px;gap:11px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
  color:var(--ink);text-align:right;box-shadow:0 14px 40px -34px rgba(0,0,0,.8);
  overflow:hidden;position:relative;isolation:isolate;
}
.favorite-hub::before{content:'';position:absolute;z-index:-1;inset-inline-end:-34px;top:-52px;width:130px;height:130px;border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,transparent);filter:blur(24px);opacity:.6}
.favorite-hub__icon{width:48px;height:48px;display:grid;place-items:center;justify-self:center;align-self:center;background:transparent;color:var(--favorite);box-shadow:none}
.favorite-hub__icon svg{width:19px;height:19px;fill:var(--favorite);stroke:var(--favorite);stroke-width:1.7}
.favorite-hub__text{min-width:0}.favorite-hub__text b{display:block;font-size:15px;line-height:1.35}.favorite-hub__text small{display:block;margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favorite-hub__count{min-width:30px;height:30px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:var(--surface2);color:var(--ink);font-size:11px;font-variant-numeric:tabular-nums}
.favorite-hub__arrow{display:grid;place-items:center;color:var(--faint)}
.favorite-hub__arrow svg{width:18px;height:18px}
.favorite-hub.is-active{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:var(--surface)}
.favorite-hub:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The hub is the discoverable favorite entry. Keep the legacy segment in DOM as the filter owner, but do not duplicate it visually. */
#librarySegs [data-seg='favorite']{display:none!important}

#libraryGrid .library-row .art{position:relative;overflow:visible}
/* 44px remains the touch target, while the visible favorite is deliberately tiny
   and sits at the lower corner instead of covering the reciter's face. */
.library-favorite{
  position:absolute;z-index:5;left:-6px;bottom:-7px;width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;
  display:grid;place-items:center;isolation:isolate;touch-action:manipulation;
}
.library-favorite::before{content:'';position:absolute;z-index:-1;width:25px;height:25px;border-radius:50%;background:rgba(12,12,12,.66);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:0 4px 12px rgba(0,0,0,.2);transition:background .2s ease,border-color .2s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.library-favorite span{display:grid;place-items:center}.library-favorite svg{width:13px;height:13px;fill:transparent;stroke:currentColor;stroke-width:2;transition:fill .18s ease,stroke .18s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.library-favorite.is-favorite{color:#fff}.library-favorite.is-favorite::before{background:color-mix(in srgb,var(--favorite) 88%,#111);border-color:color-mix(in srgb,var(--favorite) 66%,#fff)}.library-favorite.is-favorite svg{fill:currentColor;stroke:currentColor}
.library-favorite:active::before{transform:scale(.88)}
.library-favorite:focus-visible{outline:2px solid var(--ink);outline-offset:-6px;border-radius:50%}
.library-editing .library-favorite{opacity:0;visibility:hidden;pointer-events:none}
#libraryGrid .library-row.is-favorite h3::after{content:'';display:inline-block;width:5px;height:5px;margin-inline-start:7px;border-radius:50%;background:var(--favorite);vertical-align:middle;opacity:.82}

/* Top actions need independent breathing room; the spacer still owns alignment. */
.player-top{gap:10px}
.player-favorite,#playerMore{flex:0 0 auto}
.player-favorite{margin-inline-end:2px}
.player-favorite,.player-favorite svg,#miniFav svg{transition:color .18s ease,fill .18s ease,transform .25s cubic-bezier(.16,1,.3,1)}
.player-favorite svg,#miniFav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
.player-favorite.is-favorite,#miniFav.is-favorite{color:var(--favorite)!important}
.player-favorite.is-favorite svg,#miniFav.is-favorite svg{fill:currentColor;stroke:currentColor}
.player-favorite[aria-pressed='true']{background:color-mix(in srgb,var(--favorite) 10%,var(--surface2));border-color:color-mix(in srgb,var(--favorite) 24%,var(--line))}

.tilawat-fav-burst{position:fixed;z-index:4000;left:0;top:0;width:8px;height:8px;border-radius:50%;background:var(--favorite);pointer-events:none;box-shadow:0 0 0 1px color-mix(in srgb,#fff 22%,transparent);will-change:transform,opacity}

@media(hover:hover){
  .favorite-hub:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 34%,var(--line));box-shadow:0 20px 46px -34px rgba(0,0,0,.9)}
  .library-favorite:hover::before{background:rgba(15,15,15,.82);transform:scale(1.04)}
}
@media(max-width:360px){.favorite-hub{grid-template-columns:44px minmax(0,1fr) auto 14px;padding-inline:9px;gap:8px}.favorite-hub__icon{width:44px;height:44px}.favorite-hub__text small{font-size:10px}.favorite-hub__count{min-width:27px;padding:0 7px}}
@media(prefers-reduced-motion:reduce){.favorite-hub,.library-favorite::before,.library-favorite svg,.player-favorite,.player-favorite svg,#miniFav svg{transition:none!important}.tilawat-fav-burst{display:none!important}}