/* Bouton « demande karaoké » de la page de lecture — reprend les couleurs du widget de notation. */
.karaoke-request {
    margin: 6px auto 12px;
    max-width: 340px;
    text-align: center;
    line-height: 1.35;
}
.karaoke-request[hidden] { display: none; }
.karaoke-request.is-busy { opacity: .72; pointer-events: none; }

.karaoke-request-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(101, 255, 159, .45);
    border-radius: 14px;
    background: rgba(0, 0, 0, .28);
    color: #e7fff0;
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.karaoke-request-button:hover:not(:disabled),
.karaoke-request-button:focus-visible {
    background: rgba(101, 255, 159, .16);
    transform: translateY(-1px);
}
.karaoke-request-button:focus-visible,
.karaoke-request-cancel:focus-visible {
    outline: 1px solid rgba(101, 255, 159, .8);
    outline-offset: 3px;
}
.karaoke-request-button:disabled { opacity: .55; cursor: default; }
.karaoke-request-icon { font-size: 18px; flex: 0 0 auto; }

.karaoke-request-thanks { margin: 0 0 3px; color: #65ff9f; font-size: 13px; font-weight: 600; }
.karaoke-request-meta { margin: 4px 0 0; color: #d8e9de; font-size: 11px; }
.karaoke-request-warn { color: #ffc66d; }
.karaoke-request-status { margin: 6px 0 0; font-size: 12px; }
.karaoke-request-status.is-ok { color: #d8e9de; }
.karaoke-request-status.is-error { color: #ff9b9b; }

.karaoke-request-cancel {
    margin-top: 6px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: transparent;
    color: #cfd8d2;
    font-size: 11px;
    cursor: pointer;
}
.karaoke-request-cancel:hover { border-color: rgba(101, 255, 159, .45); color: #e7fff0; }