:root{--bg-color: #f4f2eb;--header-bg: #eae8e2;--text-color: #1a1a1a;--border-color: #1a1a1a;--primary-color: #059669;--primary-text: #ffffff;--card-bg: #ffffff}*{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,sans-serif}body{background-color:var(--bg-color);color:var(--text-color);padding-bottom:0}.container{max-width:1200px;margin:0 auto;padding:clamp(1rem,4vw,2rem);display:flex;flex-direction:column;gap:clamp(2rem,6vw,4rem)}.card{background-color:var(--card-bg);border:clamp(2px,1vw,4px) solid var(--border-color);border-radius:clamp(1rem,3vw,2rem);padding:clamp(1.5rem,5vw,3rem);box-shadow:clamp(4px,2vw,12px) clamp(4px,2vw,12px) 0 0 var(--border-color);text-align:center;min-width:0}.folder-badge{display:inline-block;background-color:#d1fae5;color:#065f46;border:clamp(1px,.5vw,2px) solid #059669;padding:clamp(.25rem,2vw,.5rem) clamp(1rem,3vw,2rem);border-radius:9999px;font-size:clamp(1rem,4vw,1.5rem);font-weight:900;margin-bottom:clamp(1rem,4vw,2rem);word-break:break-word}#current-song-title{font-size:clamp(2.5rem,8vw,5rem);font-weight:900;line-height:1.1;margin-bottom:clamp(1.5rem,5vw,3rem);word-break:break-word}.controls{display:flex;flex-direction:row;flex-wrap:wrap;gap:clamp(.5rem,3vw,1.5rem);margin-bottom:clamp(1.5rem,5vw,3rem)}.btn{flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:clamp(1rem,4vw,2rem);font-size:clamp(1.5rem,6vw,2.5rem);font-weight:900;border:clamp(2px,1vw,4px) solid var(--border-color);border-radius:clamp(.75rem,2vw,1.5rem);cursor:pointer;box-shadow:clamp(2px,1vw,6px) clamp(2px,1vw,6px) 0 0 var(--border-color);transition:transform .1s,box-shadow .1s;word-break:break-word;min-width:0}@media(min-width:480px){.btn{flex:1 1 calc(50% - 1rem)}}.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 0 var(--border-color)}.btn-primary{background-color:var(--primary-color);color:var(--primary-text)}.btn-primary.playing{background-color:#fbbf24;color:#000}.btn-secondary{background-color:var(--card-bg);color:var(--text-color)}.volume-controls{background-color:var(--bg-color);border:clamp(2px,1vw,4px) solid var(--border-color);border-radius:clamp(.75rem,2vw,1.5rem);padding:clamp(1rem,4vw,2rem);display:flex;flex-direction:column;align-items:stretch;gap:clamp(1rem,4vw,2rem);min-width:0}@media(min-width:600px){.volume-controls{flex-direction:row;align-items:center;justify-content:space-between}}#volume-label{font-size:clamp(1.5rem,6vw,2.5rem);font-weight:900;text-align:center}.volume-buttons{display:flex;flex-direction:row;gap:clamp(.5rem,2vw,1rem);width:100%;min-width:0}@media(min-width:600px){.volume-buttons{width:auto}}.btn-outline{flex:1;padding:clamp(.75rem,3vw,1.5rem);font-size:clamp(1.2rem,4vw,2rem);font-weight:900;background-color:var(--card-bg);border:clamp(2px,1vw,4px) solid var(--border-color);border-radius:clamp(.5rem,1.5vw,1rem);cursor:pointer;text-align:center;word-break:break-word;min-width:0}.btn-outline:active{background-color:#e5e7eb}h3{font-size:clamp(2rem,7vw,3.5rem);font-weight:900;text-align:center;border-bottom:clamp(2px,1vw,4px) solid var(--border-color);padding-bottom:clamp(.5rem,2vw,1.5rem);margin-bottom:clamp(1.5rem,5vw,3rem)}.folders-grid{display:grid;grid-template-columns:1fr;gap:clamp(1rem,4vw,2.5rem)}.folder-item{background-color:var(--card-bg);border:clamp(2px,1vw,4px) solid var(--border-color);border-radius:clamp(1rem,3vw,2rem);padding:clamp(1.5rem,5vw,3rem);font-size:clamp(1.8rem,6vw,3rem);font-weight:900;cursor:pointer;box-shadow:clamp(4px,2vw,8px) clamp(4px,2vw,8px) 0 0 var(--border-color);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(.5rem,2vw,1.5rem);text-align:left;min-width:0}@media(min-width:480px){.folder-item{flex-direction:row;align-items:center;justify-content:space-between}}.folder-item.active{background-color:#a7f3d0;border-color:#064e3b;color:#064e3b}.folder-count{opacity:.7;font-size:clamp(1.2rem,4vw,2rem)}.songs-list{background-color:var(--card-bg);border:clamp(2px,1vw,4px) solid var(--border-color);border-radius:clamp(1rem,3vw,2rem);overflow:hidden;box-shadow:clamp(4px,2vw,8px) clamp(4px,2vw,8px) 0 0 var(--border-color)}.song-item{width:100%;text-align:left;background:none;border:none;border-bottom:clamp(2px,1vw,4px) solid var(--border-color);padding:clamp(1rem,4vw,2.5rem);font-size:clamp(1.5rem,5vw,2.5rem);font-weight:900;cursor:pointer;display:flex;align-items:center;gap:clamp(1rem,4vw,2rem);word-break:break-word;min-width:0}.song-item:last-child{border-bottom:none}.song-item:hover{background-color:#f3f4f6}.song-item.active{background-color:#d1fae5;color:#065f46}.song-index{width:clamp(3rem,10vw,5rem);height:clamp(3rem,10vw,5rem);border-radius:50%;border:clamp(2px,1vw,4px) solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:clamp(1.2rem,5vw,2.5rem);flex-shrink:0;background-color:var(--bg-color)}.song-item.active .song-index{background-color:var(--primary-color);color:#fff}.footer{background-color:var(--header-bg);border-top:clamp(2px,1vw,4px) solid var(--border-color);padding:clamp(2rem,8vw,4rem) clamp(1rem,4vw,2rem);text-align:center;margin-top:clamp(2rem,8vw,4rem)}.footer h1{font-size:clamp(2.5rem,8vw,4.5rem);font-weight:900;color:#065f46;margin-bottom:clamp(1rem,4vw,1.5rem)}.footer p{font-size:clamp(1.2rem,5vw,2.2rem);font-weight:700;color:#374151;max-width:800px;margin:0 auto;line-height:1.4}.folder-name,.song-title-text{min-width:0;word-break:break-word;overflow-wrap:break-word}.song-title-text{flex:1}