body { font-family: sans-serif; padding: 20px; background: #f4f4f4; margin: 0; } #audioContainer { max-width: 600px; margin: auto; margin-bottom: 10px; background: #fff; border: 1px solid #ccc; padding: 15px; border-radius: 18px; } .controls { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .controls button { font-size: 20px; padding: 8px 12px; cursor: pointer; } .time { font-weight: bold; font-family: monospace; } .progressBar { position: relative; background: #ddd; height: 8px; border-radius: 4px; cursor: pointer; margin: 10px 0; } .progressFill { background: #4285f4; height: 100%; width: 0%; border-radius: 4px; } audio { width: 100%; margin-bottom: 20px; } .track { display: flex; gap: 10px; padding: 10px; border: 1px solid #ccc; background: #fff; margin-bottom: 8px; align-items: center; cursor: pointer; transition: background 0.2s; border-radius: 18px; } .track:hover { background: #eaeaea; } .active { background: #dcdcdc !important; } .cover { width: 60px; height: 60px; object-fit: cover; flex-shrink: 0; border-radius: 10px; } .cover-player { width: 72px; border-radius: 10px; } .info { flex-grow: 1; } .info strong { display: block; font-size: 1.1em; } .info small { color: #666; } @media (max-width: 600px) { .track { flex-direction: row; gap: 8px; } .cover { width: 48px; height: 48px; } .info strong { font-size: 1em; } }