:root {
    --primary: #E30613;
    --text-banner: #FFD700;
    --sub-banner: #FFFFFF;
    --btn-bg: #F8F4EB;
    --site-bg: #f3f4f6;
}

body { background-color: var(--site-bg); font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* Scrollbar Dinâmica */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 10px; }

/* Banner Principal */
#banner-fundo { background-color: var(--primary); }

/* Animação Reveal */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.reveal-item { opacity: 0; animation: fadeInUp 0.6s ease forwards; }

/* Botões Plataforma */
.bg-btn-listen { background-color: var(--btn-bg) !important; }
.btn-hover { transition: all 0.3s ease; color: black; text-decoration: none; border: 1px solid transparent; }
.rounded-10 { border-radius: 12px !important; }
.platform-logo { width: 120px; max-height: 32px; object-fit: contain; object-position: right center; }
.platform-name { font-weight: 900; font-size: 14px; }

/* HOVER: Fundo do Banner / Letras e Ícone SEMPRE Brancos */
.btn-hover:hover {
    transform: translateY(-2px);
    background-color: var(--primary) !important;
    color: #FFFFFF !important; 
}
.btn-hover:hover svg { stroke: #FFFFFF !important; }

/* --- PLAYER PREMIUM PERSONALIZADO (SEM BORDAS) --- */
.custom-player {
    background: #1a1a1a; 
    border-radius: 16px; 
    display: flex; 
    align-items: center;
    padding: 16px; 
    gap: 15px; 
    border: none; /* REMOVIDO BORDAS CONFORME PEDIDO */
}
#player-capa { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; }
.player-info { flex-grow: 1; }
/* Título e Subtítulo do Player puxam do CONFIG */
.track-name { font-weight: 800; font-size: 14px; }
.track-artist { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.progress-container { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; cursor: pointer; }
.progress-bar { width: 0%; height: 100%; background: var(--primary); border-radius: 2px; }

/* Botão Play do Player Central */
.player-play-btn { background: var(--primary); border: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.player-play-btn svg { width: 22px; fill: #FFFFFF; }

/* Redes Sociais */
.social-circle { width: 45px; height: 45px; background-color: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.social-circle:hover { transform: scale(1.1); }

/* Player Flutuante (Rodapé) */
.music-control { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 100; border: 2px solid var(--primary); }
.music-control svg { width: 24px; fill: white; }
.playing { animation: spin 3s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Outros */
.share-btn-circle { position: absolute; top: 15px; right: 15px; width: 42px; height: 42px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 40; border: none; cursor: pointer; }
#share-menu { display: none; position: absolute; top: 65px; right: 15px; background: white; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 50; width: 180px; overflow: hidden; border: 1px solid #eee; }
#share-menu button { width: 100%; padding: 14px; text-align: left; font-weight: 700; border: none; background: white; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
#toast { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: white; padding: 10px 24px; border-radius: 30px; opacity: 0; transition: opacity 0.3s; z-index: 1000; }
.hidden { display: none; }