/* Card de perfil no hover de um nome: ranking, feed, comentários e diretório de membros */
.person { position: relative; }
.person-name { border-bottom: 1px solid transparent; }
.person:hover > .person-name { border-bottom-color: currentColor; }
.person-card { position: fixed; left: 0; top: 0; z-index: 1200; display: block; width: 360px; max-width: calc(100vw - 32px); padding: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-ui); color: var(--ink); font: 400 14px/20px var(--font); text-align: left; white-space: normal; cursor: default; }
.person-loading { color: var(--gray-text); }

.person-head { display: flex; gap: 16px; align-items: flex-start; }
.person-ring { position: relative; width: 108px; height: 108px; flex: none; }
.person-ring svg { position: absolute; inset: 0; width: 108px; height: 108px; transform: rotate(-90deg); }
.person-ring .avatar-96 { position: absolute; left: 6px; top: 6px; }
.person-ring .badge { right: -3px; bottom: -3px; }
.person-main { flex: 1; min-width: 0; }
.person-title { font: 700 18px/27px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-status { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 400 13px/19.5px var(--font); color: var(--gray-text); }
.person-status .icon { color: var(--gray); flex: none; }
.person-status .online-dot { width: 10px; height: 10px; }
.person-bio { margin-top: 8px; font: 400 14px/20px var(--font); }
.person-level { margin-top: 12px; font: 700 13px/19.5px var(--font); color: var(--indigo); }
.person-next { margin-top: 2px; font: 400 13px/19.5px var(--font); color: var(--gray-text); }
.person-next b { color: var(--ink); font-variant-numeric: tabular-nums; }
.person-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
/* O card abre dentro da linha de membro, do post e do comentário: nada de fora posiciona o que está aqui */
.person-card .btn { position: static; width: auto; float: none; padding: 0 8px; }

/* Sem hover no celular: o nome continua sendo link para o perfil */
@media (max-width: 767px) { .person-card { display: none !important; } }
.silence-action { display: grid; grid-column: 1 / -1; margin-top: 8px; }
.silence-note { font: 400 13px/18px var(--font); color: var(--gray-text); }