Layout de Bandeja — O Arquivista VIP <div class="avaliacao-widget" style="margin-top:1.5rem">  <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap"> <div style="text-align:center;background:var(--bg-card);border:1px solid var(--border-soft);border-radius:8px;padding:.6rem 1rem;min-width:70px"> <div style="font-size:2rem;font-weight:700;color:var(--amber);font-family:var(--font-disp);line-height:1">0</div> <div style="font-size:.65rem;color:var(--text-muted);margin-top:.2rem">de 5</div> </div> <div> <div style="display:flex;gap:2px;font-size:1.3rem"> <span style="color:var(--border-soft)">★</span> <span style="color:var(--border-soft)">★</span> <span style="color:var(--border-soft)">★</span> <span style="color:var(--border-soft)">★</span> <span style="color:var(--border-soft)">★</span> </div> <div style="font-size:.8rem;color:var(--text-muted);margin-top:.2rem"> 0 avaliações </div> </div> </div>  <div style="background:var(--bg-card);border:1px solid var(--border-soft);border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.875rem;color:var(--text-muted)"> <a href="/auth/login" style="color:var(--amber)">Faça login</a> para deixar sua avaliação. </div>  </div> <script> (function(){ document.querySelectorAll('.star-picker').forEach(function(picker){ var field = document.getElementById(picker.dataset.field); var stars = picker.querySelectorAll('.star-pick'); var cur = parseInt(field.value) || 0; function paint(n){ stars.forEach(function(s,i){ s.style.color = i < n ? 'var(--amber)' : '#333'; }); } paint(cur); stars.forEach(function(s, i){ s.addEventListener('mouseover', function(){ paint(i+1); }); s.addEventListener('mouseout', function(){ paint(cur); }); s.addEventListener('click', function(){ cur = i+1; field.value = cur; paint(cur); }); }); }); })(); </script>