.reacao-lancamento{
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:10px;
    background:#111;
    padding:6px 10px;
    border-radius:10px;
}

/* TEXTO ocupa espaço e empurra botões */
.reacao-texto{
    font-size:0.75rem;
    color:#aaa;
    flex:1;
}

/* BOTÕES */
.reacao-lancamento button{
    border:none;
    cursor:pointer;
    background:#222;
    color:#fff;
    padding:6px 10px;
    border-radius:20px;
    font-size:0.75rem;
    display:flex;
    align-items:center;
    gap:4px;
    transition:.2s;
}

/* HOVER */
.reacao-lancamento .btn-like:hover{
    background:#097f03;
}

.reacao-lancamento .btn-dislike:hover{
    background:#910611;
}

/* ATIVO */
.reacao-lancamento button.ativo{
    outline:2px solid #ffd900;
}

/* PERCENTUAL */
.reacao-percent{
    font-size:0.7rem;
    color:#aaa;
    text-align:center;
    margin-top:4px;
}

.percent-value{
    color:#0bbb01;
    font-weight:bold;
}
#modalFeedback,
#modalConfirmar{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,0.6);
    z-index:99999;
}

/* BOX FEEDBACK */
.modal-feedback-box{
    background:#111;
    padding:20px 30px;
    border-radius:12px;
    color:#fff;
    font-weight:bold;
    border:2px solid #0bbb01;
    animation:fadeIn .3s ease;
}

/* BOX CONFIRM */
.modal-box{
    background:#111;
    padding:20px;
    border-radius:12px;
    color:#fff;
    text-align:center;
}

.modal-box .acoes{
    margin-top:10px;
    display:flex;
    gap:10px;
    justify-content:center;
}

.modal-box button{
    padding:6px 12px;
    border:none;
    cursor:pointer;
    border-radius:6px;
}

.modal-box .confirmar{
    background:#097f03;
    color:#fff;
}

.modal-box .cancelar{
    background:#910611;
    color:#fff;
}

@keyframes fadeIn{
    from{opacity:0; transform:scale(.8);}
    to{opacity:1; transform:scale(1);}
}