body{font-family:Arial,sans-serif;background-color:#121212;color:#333;margin:0}.container{max-width:480px;background:#333;margin:20px auto;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);color:#c9d1d9}h1,h3{text-align:center}input[type=file]{width:calc(100% - 40px);margin:10px 20px;padding:12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer}input[type=file]:hover{border-color:#3fb950}.upload-bottone{width:calc(100% - 40px);margin:20px;padding:10px;background-color:#3fb950;border-radius:4px;transition:opacity .2s ease-in-out}.upload-bottone:hover{opacity:.9}.upload-bottone:disabled{opacity:.5;cursor:not-allowed}.upload-progress-container{margin:20px;background-color:#eee;border-radius:4px;overflow:hidden}.upload-progress{height:20px;width:0;background-color:#3fb950;transition:width .5s ease;border-radius:4px 0 0 4px}audio{width:100%}audio,p{margin-top:15px}p{text-align:center}.upload-progress,input[type=file]{box-shadow:inset 0 1px 3px rgba(0,0,0,.2)}.error{border:5px solid red}.success{border:5px solid green}.uploading{border:5px solid #ff0}@keyframes shake{0%,to{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.error.shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) both;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;perspective:1000px}@keyframes successAnimation{0%{background:radial-gradient(circle at 50% 50%,transparent 99%,#3fb950 100%)}to{background:#3fb950}}.success.back{animation:successAnimation 2s forwards}.file-container{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px;padding:10px;max-width:1240px;margin:0 auto}.song-info{background-color:#333;padding:10px;border:1px solid #ccc;border-radius:5px;display:flex;flex-direction:column;gap:10px;overflow:hidden}.song-info p{color:#fff}.file-name,.upload-bottone{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-bottone{padding:5px 10px;cursor:pointer;border:none;background-color:#007bff;color:#fff;border-radius:3px;text-align:center}@media (max-width:768px){.file-container{grid-template-columns:repeat(2,1fr)}}@media (max-width:490px){.file-container{grid-template-columns:1fr}}.drop-area-highlight{border:2px dashed #3fb950;background-color:#f9fff9}input[type=file]{display:none}label[for=fileInput]{display:inline-block;width:calc(100% - 40px);margin:10px 20px;padding:12px;background-color:#fff;border:1px solid #ccc;border-radius:4px;cursor:pointer;text-align:center}label[for=fileInput]:hover{background-color:#f0f2f5;border-color:#3fb950}.file-name-display{font-size:1rem;color:#333;margin:10px 20px;padding:8px;background-color:#e9ecef;border-radius:4px;text-align:center}.new-file-animation{animation:slideDown .5s ease-out}@keyframes slideRight{0%{transform:translateX(0)}to{transform:translateX(20px)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(20px)}}.existing-file-animation{animation:slideRight .5s ease-out}@media screen and (max-width:490px){.existing-file-animation{animation:slideDown .5s ease-out}}