.rqg-container {
    max-width: 380px;
    margin: 2rem auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Card (ảnh/video nền + glass panel) ---------- */

.rqg-card {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    overflow: hidden;
    background: #111;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    animation: rqg-card-in 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rqg-card-in {
    from {
        opacity: 0;
        transform: scale(0.94) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.rqg-bg-wrap {
    position: absolute;
    inset: 0;
    animation: rqg-bg-fade 0.7s ease;
}

@keyframes rqg-bg-fade {
    from {
        opacity: 0;
        transform: scale(1.06);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rqg-bg-wrap img,
.rqg-bg-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /*animation: rqg-kenburns 14s ease-in-out infinite alternate;*/
}

@keyframes rqg-kenburns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.08);
    }
}

.rqg-bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

/* ---------- Glass panel (quote + player) ---------- */

/*
 * Vị trí panel được canh theo "vùng an toàn" (safe zone) chuẩn của video TikTok,
 * để khi tải ảnh/video nền này lên TikTok, quote + player không bị icon
 * like/comment/share (bên phải) hay caption/tên nhạc/thanh điều hướng (dưới cùng)
 * của TikTok che mất:
 *   - right: ~14% chừa chỗ cho cột icon tương tác bên phải
 *   - bottom: ~17% chừa chỗ cho caption + tên nhạc + thanh điều hướng dưới cùng
 */
.rqg-glass-panel {
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 17%;
    padding: 16px 16px 12px;
    border-radius: 20px;
    /*background: rgba(255, 255, 255, 0.14);*/
    /*backdrop-filter: blur(18px) saturate(140%);*/
    /*-webkit-backdrop-filter: blur(18px) saturate(140%);*/
    /*border: 1px solid rgba(255, 255, 255, 0.25);*/
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);*/
    
    height: 65%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    color: #fff;
    overflow: hidden;
    animation: rqg-panel-in 0.6s 0.1s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes rqg-panel-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hiệu ứng ánh sáng lướt qua panel kính - chỉ chạy khi có class .rqg-shimmer (JS toggle để trigger lại được) */
/*.rqg-glass-panel::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    inset: 0;*/
/*    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 66%);*/
/*    transform: translateX(120%);*/
/*    pointer-events: none;*/
/*}*/

/*.rqg-glass-panel.rqg-shimmer::before {*/
/*    animation: rqg-shimmer 1.3s ease forwards;*/
/*}*/

/*@keyframes rqg-shimmer {*/
/*    from {*/
/*        transform: translateX(-120%);*/
/*    }*/
/*    to {*/
/*        transform: translateX(120%);*/
/*    }*/
/*}*/

.rqg-quote {
    margin: 0 0 14px;
    padding: 0;
    border: none;
    animation: rqg-quote-in 0.5s 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes rqg-quote-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rqg-quote p {
    color: #fff;
    margin: 0 0 6px;
    font-size: 1.05rem;
    line-height: 1.45;
    font-weight: 400;
    font-style: italic;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.rqg-quote p::before {
    content: "\201C";
}

.rqg-quote p::after {
    content: "\201D";
}

.rqg-quote footer {
    color: #fff;
    font-style: normal;
    font-size: 0.82rem;
    opacity: 0.85;
}

.rqg-quote footer::before {
    content: "\2014 ";
}

/* ---------- Player ---------- */

.rqg-player {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rqg-play-btn {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.rqg-play-btn:hover {
    transform: scale(1.08);
}

.rqg-play-btn:active {
    transform: scale(0.96);
}

/* Nền nút Play = ảnh bìa (cover art) của bản nhạc trên Free To Use, xoay như đĩa than khi đang phát */
.rqg-play-cover {
    position: absolute;
    inset: -1px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}

.rqg-player.is-playing .rqg-icon-play{
    display: none;
}

.rqg-player .rqg-icon-pause{
    display: none;
}

.rqg-player.is-playing .rqg-icon-pause{
    display: block;
}

.rqg-player.is-playing .rqg-play-cover {
    animation: rqg-vinyl-spin 6s linear infinite;
}

@keyframes rqg-vinyl-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Lớp phủ tối để icon play/pause luôn rõ trên mọi ảnh bìa */
.rqg-play-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
}

.rqg-play-btn svg {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

.rqg-player-body {
    flex: 1 1 auto;
    min-width: 0;
}

.rqg-player-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.rqg-track-title {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rqg-track-artist {
    font-size: 0.72rem;
    opacity: 0.75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
}

/* Range input tối giản, hợp tông glass */
.rqg-progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    cursor: pointer;
    margin: 0;
}

.rqg-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.rqg-progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

/* Equalizer bars - chỉ chạy animation khi đang phát nhạc */
.rqg-eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 14px;
    margin-top: 6px;
}

.rqg-eq span {
    display: block;
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    transform: scaleY(0.25);
    transform-origin: bottom;
    animation: rqg-eq-bounce 0.9s ease-in-out infinite;
    animation-play-state: paused;
}

.rqg-eq span:nth-child(2) {
    animation-delay: 0.12s;
}

.rqg-eq span:nth-child(3) {
    animation-delay: 0.24s;
}

.rqg-eq span:nth-child(4) {
    animation-delay: 0.36s;
}

.rqg-player.is-playing .rqg-eq span {
    animation-play-state: running;
}

@keyframes rqg-eq-bounce {
    0%,
    100% {
        transform: scaleY(0.25);
    }
    50% {
        transform: scaleY(1);
    }
}

.rqg-audio-credit {
    margin-top: 10px;
    font-size: 0.68rem;
    opacity: 0.7;
    line-height: 1.4;
}

.rqg-audio-credit a {
    color: #fff;
    text-decoration: underline;
}

/* ---------- Loading overlay on the card ---------- */

.rqg-card-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: rqg-fade-simple 0.2s ease;
}

@keyframes rqg-fade-simple {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.rqg-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: rqg-spin 0.8s linear infinite;
}

@keyframes rqg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Action buttons ---------- */

.rqg-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.rqg-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #222;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rqg-action-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.rqg-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.rqg-action-btn:active {
    transform: translateY(0);
}

.rqg-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.rqg-action-primary {
    color: #fff;
    background: linear-gradient(135deg, #ff9a5c, #ff6f91);
    border: none;
    box-shadow: 0 8px 20px rgba(255, 111, 145, 0.35);
}

.rqg-action-primary:hover {
    box-shadow: 0 12px 26px rgba(255, 111, 145, 0.45);
}

.rqg-action-icon.spin {
    animation: rqg-spin 0.8s linear infinite;
}

/* ---------- Misc ---------- */

.rqg-error {
    margin-top: 0.85rem;
    color: #c0392b;
    font-size: 0.85rem;
    text-align: center;
}

.rqg-updated-note {
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: #aaa;
    text-align: center;
}