:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--background-color: #ffffff;--border-color: #ddd;--text-color: #333;--hover-background: #f0f0f0;--header-color: #000;--secondary-text-color: #666}@media (prefers-color-scheme: dark){:root{--background-color: #2c2c2c;--border-color: #444;--text-color: #f0f0f0;--hover-background: #383838;--header-color: #ffffff;--secondary-text-color: #d0d0d0}}.file-list{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}.file-card{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem;width:100%;max-width:300px;box-shadow:0 2px 4px #0000001a;transition:transform .2s,background-color .2s;color:var(--text-color);box-sizing:border-box}.file-card:hover{transform:scale(1.02);background-color:var(--hover-background)}.file-card h3{margin-top:0;font-size:clamp(1rem,2.5vw,1.2rem);color:var(--header-color)}.file-card p{margin:.5rem 0;font-size:clamp(.8rem,2vw,.9rem);color:var(--secondary-text-color)}@media (min-width: 768px){.file-card{width:calc(50% - .5rem)}}@media (min-width: 1024px){.file-card{width:calc(33.33% - .67rem)}}:root{--background-color: #ffffff;--text-color: #333;--header-color: #000;--secondary-text-color: #666;--shadow-color: rgba(0, 0, 0, .1)}@media (prefers-color-scheme: dark){:root{--background-color: #2c2c2c;--text-color: #f0f0f0;--header-color: #ffffff;--secondary-text-color: #d0d0d0;--shadow-color: rgba(0, 0, 0, .3)}}.media-player{max-width:90%;margin:2rem auto;padding:2rem;text-align:center;color:var(--text-color);background-color:var(--background-color);border-radius:8px;box-shadow:0 2px 10px var(--shadow-color);box-sizing:border-box}.media-player h2{font-size:clamp(1.5rem,5vw,2rem);margin-bottom:1rem;color:var(--header-color)}.media-player p{margin:.5rem 0;font-size:clamp(.9rem,2.5vw,1rem);color:var(--secondary-text-color)}@media (min-width: 768px){.media-player{max-width:600px}}:root{--background-color: #ffffff;--border-color: #ddd;--text-color: #333;--hover-background: #f0f0f0;--header-color: #000;--secondary-text-color: #666;--button-background: #e0e0e0;--button-hover: #d0d0d0;--shadow-color: rgba(0, 0, 0, .1);--active-tab-border: #000}@media (prefers-color-scheme: dark){:root{--background-color: #2c2c2c;--border-color: #444;--text-color: #f0f0f0;--hover-background: #383838;--header-color: #ffffff;--secondary-text-color: #d0d0d0;--button-background: #505050;--button-hover: #606060;--shadow-color: rgba(0, 0, 0, .3);--active-tab-border: #ffffff}}.new-playlist-form{margin-bottom:2rem;color:var(--text-color);display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.new-playlist-form input{margin:.5rem;padding:.5rem;font-size:clamp(.9rem,2vw,1rem);background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;flex:1;min-width:200px}.new-playlist-form button{padding:.5rem 1rem;font-size:clamp(.9rem,2vw,1rem);cursor:pointer;background-color:var(--button-background);color:var(--text-color);border:none;border-radius:4px;transition:background-color .2s;min-width:100px}.new-playlist-form button:hover{background-color:var(--button-hover)}.Modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--background-color);padding:2rem;border-radius:8px;box-shadow:0 2px 10px var(--shadow-color);z-index:1000;color:var(--text-color);width:90%;max-width:600px;box-sizing:border-box}.Modal h2{margin-top:0;color:var(--header-color);font-size:clamp(1.2rem,3vw,1.5rem)}.Modal ul{list-style:none;padding:0;max-height:300px;overflow-y:auto}.Modal li{margin:.5rem 0;color:var(--secondary-text-color);font-size:clamp(.9rem,2vw,1rem)}.Modal input[type=text]{width:100%;padding:.5rem;margin:.5rem 0;background-color:var(--background-color);color:var(--text-color);border:1px solid var(--border-color);border-radius:4px;font-size:clamp(.9rem,2vw,1rem)}.Modal button{padding:.5rem 1rem;font-size:clamp(.9rem,2vw,1rem);cursor:pointer;background-color:var(--button-background);color:var(--text-color);border:none;border-radius:4px;transition:background-color .2s;margin:.5rem}.Modal button:hover{background-color:var(--button-hover)}.song-card{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem;margin-bottom:1rem;box-shadow:0 2px 4px var(--shadow-color);transition:transform .2s,background-color .2s;color:var(--text-color)}.song-card:hover{transform:scale(1.02);background-color:var(--hover-background)}.song-card p{margin:.5rem 0;font-size:clamp(.8rem,2vw,.9rem);color:var(--secondary-text-color)}.tabs{display:flex;justify-content:space-around;margin-bottom:1rem;flex-wrap:wrap}.tabs button{padding:.5rem 1rem;font-size:clamp(.9rem,2vw,1rem);cursor:pointer;background:none;border:none;border-bottom:2px solid transparent;transition:border-color .3s;color:var(--text-color);flex:1;text-align:center}.tabs button.active{border-bottom:2px solid var(--active-tab-border)}.playlist-player{position:fixed;top:10%;left:50%;transform:translate(-50%);background:var(--background-color);padding:2rem;border:1px solid var(--border-color);box-shadow:0 0 10px var(--shadow-color);z-index:1000;color:var(--text-color);width:90%;max-width:500px;box-sizing:border-box}.playlist-player .controls{display:flex;justify-content:space-around;margin-top:1rem;flex-wrap:wrap;gap:.5rem}.playlist-player .controls button{padding:.5rem 1rem;font-size:clamp(.9rem,2vw,1rem);cursor:pointer;background-color:var(--button-background);color:var(--text-color);border:none;border-radius:4px;transition:background-color .2s;min-width:80px}.playlist-player .controls button:hover{background-color:var(--button-hover)}@media (max-width: 480px){.new-playlist-form{flex-direction:column}.tabs button{padding:.3rem .5rem;font-size:clamp(.8rem,1.8vw,.9rem)}.playlist-player{padding:1rem}}.playlist-player{max-width:800px;margin:0 auto;padding:2rem;background:#fff;border:1px solid #ccc;box-shadow:0 0 10px #0000001a}.current-song{margin-bottom:2rem}.controls{display:flex;justify-content:space-around;margin-bottom:2rem}.controls button{padding:.5rem 1rem;font-size:1rem;cursor:pointer}.playlist-songs{margin-top:2rem}.playlist-songs ul{list-style:none;padding:0}.playlist-songs li{padding:.5rem 0;border-bottom:1px solid #ccc}.app-container{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}h1{font-size:2.5rem;margin-bottom:2rem}nav{margin-bottom:2rem}nav ul{list-style:none;padding:0;display:flex;justify-content:center;gap:1rem}nav ul li{display:inline}nav ul li a{text-decoration:none;color:#646cff;font-weight:500}nav ul li a:hover{color:#535bf2}.progress-box{border:1px solid #ccc;padding:1rem;margin-top:1rem;max-height:200px;overflow-y:auto;background-color:#f9f9f9}.file-list{margin-top:2rem}.file-list ul{list-style:none;padding:0}.file-list li{padding:.5rem 0;border-bottom:1px solid #ccc}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;padding:2rem;border-radius:8px;max-width:500px;width:100%}.modal-content h2{margin-top:0}.modal-content label{display:block;margin-bottom:1rem}.modal-content input,.modal-content textarea{width:100%;padding:.5rem;margin-top:.5rem;margin-bottom:1rem}.modal-content button{margin-right:1rem}.service-status{width:10px;height:10px;border-radius:50%;margin-left:10px}.service-status.true{background-color:green}.service-status.false{background-color:red}