.header{position:sticky;top:0;display:flex;align-items:center;padding:1rem;background-color:var(--bg-primary);border-bottom:2px solid var(--border-color);z-index:100}.header-logo-button{background:none;border:none;cursor:pointer;padding:0;margin-right:1rem;flex-shrink:0;transition:opacity .2s,transform .2s}.header-logo-button:hover{opacity:.8;transform:scale(1.05)}.header-logo{flex-shrink:0}.c64-logo{background:#fff;border-radius:50%;padding:.5rem;width:3.5rem;height:3.5rem}.home-icon{padding:.5rem;width:3.5rem;height:3.5rem}.header-title{flex:1;text-align:center}.header-title h1{font-size:1.2rem;color:var(--text-primary);font-weight:400}.header-actions{flex-shrink:0;margin-left:1rem;display:flex;gap:.5rem;align-items:center}.home-button,.now-playing-button{background:#fff;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s}.home-button:hover,.now-playing-button:hover{background-color:var(--accent-color);opacity:.8}.now-playing-icon{padding:.5rem;width:3.5rem;height:3.5rem}.bottom-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1.5rem;background-color:var(--bg-primary);border-top:2px solid var(--border-color);flex-shrink:0}.bottom-bar-button{background:#fff;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s}.bottom-bar-button:hover{opacity:.8;transform:scale(1.05);background-color:var(--accent-color)}.bottom-bar-icon{padding:.5rem;width:3.5rem;height:3.5rem}.home-button{background:#fff;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s}.setup-screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.setup-content{flex:1;padding:1rem;max-width:600px;margin:0 auto;width:100%;box-sizing:border-box;overflow-y:auto;min-height:0}@media (max-width: 600px){.setup-content{padding:1rem .75rem}}.setup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.setup-content h2{color:var(--text-primary);font-size:1.5rem;margin:0}.exp-imp-container{position:relative}.exp-imp-button{padding:.5rem 1rem;background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer;font-weight:700;transition:background-color .2s}.exp-imp-button:hover{background-color:var(--border-color)}.exp-imp-dropdown{position:absolute;top:100%;right:0;margin-top:.25rem;background-color:var(--bg-primary);border:2px solid var(--border-color);z-index:100;min-width:100px}.exp-imp-dropdown button{display:block;width:100%;padding:.75rem 1rem;background:none;border:none;border-bottom:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer;text-align:left}.exp-imp-dropdown button:last-child{border-bottom:none}.exp-imp-dropdown button:hover{background-color:var(--border-color)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;color:var(--text-primary);margin-bottom:.5rem;font-size:.9rem}.form-group input[type=text],.form-group input[type=range],.form-group select{width:100%;padding:.75rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:1rem;box-sizing:border-box;max-width:100%}.form-group input[type=text]:focus,.form-group select:focus{outline:2px solid var(--accent-color);outline-offset:2px}.form-group input[type=range]{padding:0;height:8px}.form-group small{display:block;color:var(--text-secondary);font-size:.8rem;margin-top:.25rem}.form-hint{display:block;color:var(--text-secondary);font-size:.8rem;margin-top:.5rem;line-height:1.4}.toggle-label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.toggle-label input[type=checkbox]{width:auto;cursor:pointer}.toggle-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.option-disabled-hint{color:var(--text-secondary);font-size:.85em;font-style:italic}.warning-message{margin-top:.5rem;padding:.75rem;background-color:#ffc10726;border:1px solid #ffc107;color:#ffc107;font-size:.85rem;border-radius:4px}.form-actions{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}@media (max-width: 600px){.form-actions{flex-direction:column}.form-actions button{width:100%}}.form-actions button,.back-button,.save-button{flex:1;padding:1rem;border:1px solid var(--border-color);color:var(--text-primary);font-size:1rem;font-family:inherit;cursor:pointer;transition:opacity .2s,background-color .2s;height:3.5rem;min-height:3.5rem;display:flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;line-height:1rem!important;margin:0}.back-button{background-color:var(--bg-primary)}.save-button{background-color:var(--bg-primary);border:2px solid var(--border-color);font-weight:700}.save-button:hover:not(:disabled){background-color:var(--border-color);transform:scale(1.02)}.save-button:disabled{opacity:.5;cursor:not-allowed}.dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:300}.dialog{background-color:var(--bg-primary);border:2px solid var(--border-color);padding:2rem;min-width:300px;max-width:500px;width:90%;box-shadow:0 4px 6px #0000004d}.dialog h3{color:var(--text-primary);margin-bottom:1.5rem;font-size:1.3rem}.dialog-input{width:100%;padding:.75rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:1rem;margin-bottom:1.5rem}.dialog-input:focus{outline:2px solid var(--accent-color);outline-offset:2px}.dialog-actions{display:flex;gap:1rem;justify-content:flex-end}.dialog-button{padding:.75rem 1.5rem;border:1px solid var(--border-color);font-size:1rem;font-family:inherit;cursor:pointer;transition:opacity .2s,background-color .2s}.dialog-button.cancel{background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary)}.dialog-button.cancel:hover{background-color:var(--border-color);transform:scale(1.02)}.dialog-button.create{background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);font-weight:700}.dialog-button.create:hover:not(:disabled){background-color:var(--border-color);transform:scale(1.05)}.dialog-button.create:disabled{opacity:.5;cursor:not-allowed}.playlist-list{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.playlist-content{flex:1;padding:2rem;overflow-y:auto;min-height:0}.playlist-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.playlist-header h2{color:var(--text-primary);margin:0}.create-playlist-button{padding:.5rem 1.5rem;background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;border-radius:4px}.create-playlist-button:hover{background-color:var(--border-color);transform:scale(1.05)}.playlist-items{list-style:none}.playlist-item{display:flex;align-items:center;padding:1rem;margin-bottom:.5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);cursor:pointer;transition:background-color .2s}.playlist-item:hover{background-color:var(--accent-color);opacity:.8}.playlist-item.favourites-item{font-weight:700}.playlist-icon{margin-right:1rem;font-size:1.5rem}.playlist-name{color:var(--text-primary);font-size:1.1rem;flex:1}.playlist-count{color:var(--text-secondary);font-size:.9rem;margin-left:auto}.play-options{padding:1rem;border-top:1px solid var(--border-color);background-color:var(--bg-primary)}.options-group{margin-bottom:1rem}.option-label{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);cursor:pointer;margin-bottom:.5rem}.option-label input[type=checkbox]{width:auto;cursor:pointer;order:-1}.option-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.option-label span{flex:1}.option-unavailable{color:var(--text-secondary);font-size:.85em;font-style:italic;flex:none}.option-info{color:var(--text-secondary);font-size:.9rem;margin-left:1.5rem;margin-top:.25rem}.action-buttons{display:flex;gap:1rem;margin-top:1rem}.stop-button{flex:1;padding:1rem;background-color:#d32f2f;border:1px solid var(--border-color);color:#fff;font-size:1.8rem;font-family:inherit;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;justify-content:center;line-height:1}.stop-button:hover:not(:disabled){opacity:.8}.stop-button:disabled{opacity:.5;cursor:not-allowed;background-color:var(--bg-primary)}.back-button{flex:1;padding:1rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-size:1.8rem;font-family:inherit;cursor:pointer;transition:opacity .2s,background-color .2s;display:flex;align-items:center;justify-content:center;line-height:1}.back-button:hover{background-color:var(--accent-color);opacity:.8}.play-button{flex:2;padding:1rem;background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);font-size:1.2rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .2s}.play-button:hover:not(:disabled){background-color:var(--border-color);transform:scale(1.02)}.play-button:disabled{opacity:.5;cursor:not-allowed}.playlist-view{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.playlist-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.playlist-header h2{color:var(--text-primary);font-size:1.5rem;margin:0;flex:1}.delete-playlist-button{background:none;border:none;color:var(--text-primary);font-size:2rem;cursor:pointer;padding:.25rem .5rem;line-height:1;opacity:.7;transition:opacity .2s,color .2s;display:flex;align-items:center;justify-content:center}.delete-playlist-button:hover{opacity:1;color:#d32f2f}.playlist-songs{flex:1;padding:1rem;overflow-y:auto}.empty-message{color:var(--text-secondary);text-align:center;padding:2rem}.song-list{list-style:none}.song-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;margin-bottom:.5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary)}.song-info{display:flex;align-items:center;gap:.75rem;flex:1}.song-details{flex:1}.song-name{color:var(--text-primary);font-weight:700;margin-bottom:.25rem}.song-artist{color:var(--text-secondary);font-size:.85rem}.song-actions{display:flex;gap:.5rem;align-items:center}.remove-button{background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:.25rem .5rem;line-height:1;opacity:.7;transition:opacity .2s}.remove-button:hover{opacity:1;color:var(--accent-color)}.confirm-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-dialog{background-color:var(--bg-primary);border:2px solid var(--border-color);padding:1.5rem;width:90%;max-width:min(400px,calc(100% - 2rem));margin:1rem;box-shadow:0 4px 6px #0000004d;box-sizing:border-box}.confirm-dialog h3{color:var(--text-primary);margin-bottom:1rem;font-size:1.3rem}.confirm-dialog p{color:var(--text-secondary);margin-bottom:1.5rem}.confirm-dialog-actions{display:flex;gap:1rem;justify-content:flex-end}.confirm-button{padding:.75rem 1.5rem;border:2px solid var(--border-color);font-size:1rem;font-family:inherit;cursor:pointer;transition:all .2s}.confirm-button.cancel{background-color:var(--bg-primary);color:var(--text-primary)}.confirm-button.cancel:hover{background-color:var(--border-color);transform:scale(1.02)}.confirm-button.ok{background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);font-weight:700}.confirm-button.ok:hover{background-color:var(--border-color);transform:scale(1.02)}.now-playing{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.player-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--border-color)}.player-header h2{color:var(--text-primary);font-size:1.5rem;margin:0}.song-counter{color:var(--accent-color);font-size:1rem;font-weight:700}.player-content{flex:1;padding:2rem;color:var(--text-primary);overflow-y:auto}.current-song{display:flex;flex-direction:column;gap:1.5rem}.song-header{display:flex;align-items:flex-start;gap:1rem}.song-title h3{color:var(--text-primary);font-size:1.5rem;margin:0 0 .5rem}.song-artist{color:var(--text-secondary);font-size:1rem;margin:0}.time-display{display:flex;flex-direction:column;gap:.5rem}.time-remaining{color:var(--text-primary);font-size:1.2rem;font-weight:700}.duration-source{color:var(--text-secondary);font-size:.9rem}.time-controls{display:flex;gap:1rem}.time-button{padding:.75rem 1.5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:1rem;cursor:pointer;transition:background-color .2s}.time-button:hover{background-color:var(--accent-color);opacity:.8}.player-actions{padding:1rem;border-top:1px solid var(--border-color);display:flex;gap:1rem}.player-actions .stop-button{flex:1;padding:1rem;background-color:#d32f2f;border:1px solid var(--border-color);color:#fff;font-size:1.8rem;font-family:inherit;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;justify-content:center;line-height:1}.player-actions .stop-button:hover{opacity:.8}.player-actions .prev-button,.player-actions .next-button{flex:1;padding:1rem;background-color:var(--accent-color);border:1px solid var(--border-color);color:var(--bg-primary);font-size:1.5rem;font-family:inherit;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;justify-content:center;line-height:1}.player-actions .prev-button:hover:not(:disabled),.player-actions .next-button:hover:not(:disabled){opacity:.8}.player-actions .prev-button:disabled,.player-actions .next-button:disabled{opacity:.5;cursor:not-allowed}.player-actions .back-button{flex:1;padding:1rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-size:1.8rem;font-family:inherit;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;line-height:1}.player-actions .back-button:hover{background-color:var(--accent-color);opacity:.8}.subsong-section{display:flex;flex-direction:column;gap:1rem;padding:1rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px}.subsong-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}.subsong-button{padding:.5rem 1rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer;transition:background-color .2s}.subsong-button:hover:not(:disabled){background-color:var(--accent-color);color:var(--bg-primary)}.subsong-button:disabled{opacity:.5;cursor:not-allowed}.subsong-display{color:var(--text-primary);font-weight:700;font-size:1rem}.subsong-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.set-main-button{padding:.5rem 1rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer;transition:background-color .2s}.set-main-button:hover:not(:disabled){background-color:var(--accent-color);color:var(--bg-primary)}.set-main-button:disabled{cursor:default}.set-main-button.is-default{background-color:var(--accent-color);color:var(--bg-primary);border-color:var(--accent-color)}.auto-play-label{display:flex;align-items:center;gap:.5rem;color:var(--text-primary);font-size:.9rem;cursor:pointer}.auto-play-label input[type=checkbox]{width:1.2rem;height:1.2rem;accent-color:var(--accent-color);cursor:pointer}@media (max-width: 480px){.subsong-nav{flex-wrap:wrap;justify-content:center}.subsong-prefs{flex-direction:column;align-items:stretch}.set-main-button{width:100%;text-align:center}}.search-results{flex:1;display:flex;flex-direction:column;min-height:0}.search-results-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:1.1rem;padding:2rem}.search-results-header{display:flex;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-primary);flex-shrink:0}.search-results-header h3{color:var(--text-primary);font-size:1.2rem;margin:0}.results-limited{color:var(--text-secondary);font-size:.9rem;font-weight:400}.search-results-list{flex:1;overflow-y:auto;padding:1rem;min-height:0}.search-result-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;margin-bottom:.5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);position:relative}.result-info{display:flex;align-items:center;gap:1rem;flex:1}.result-details{flex:1}.result-name{color:var(--text-primary);font-size:1rem;font-weight:700;margin-bottom:.25rem}.result-artist{color:var(--accent-color);font-size:.9rem;margin-bottom:.25rem}.result-path{color:var(--text-secondary);font-size:.8rem;font-family:monospace;opacity:.8;word-break:break-all}.result-meta{color:var(--text-secondary);font-size:.85rem}.result-actions{position:relative;display:flex;gap:.5rem;align-items:center}.preview-button{background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);width:2rem;height:2rem;border-radius:50%;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;padding:0;transition:all .2s}.preview-button:hover{background-color:var(--accent-color)}.preview-button.playing{background-color:#d32f2f;color:#fff}.preview-button.playing:hover{background-color:#b71c1c}.add-button{background-color:var(--accent-color);border:1px solid var(--border-color);color:var(--text-primary);width:2rem;height:2rem;border-radius:50%;cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;line-height:1;padding:0}.add-button:hover{opacity:.8}.add-menu{position:absolute;right:0;top:100%;margin-top:.5rem;background-color:var(--bg-primary);border:1px solid var(--border-color);min-width:200px;z-index:10;box-shadow:0 4px 6px #0000004d}.add-menu-item{display:block;width:100%;padding:.75rem 1rem;background:none;border:none;border-bottom:1px solid var(--border-color);color:var(--text-primary);text-align:left;cursor:pointer;font-family:inherit;font-size:.9rem}.add-menu-item:last-child{border-bottom:none}.add-menu-item:hover{background-color:var(--accent-color);opacity:.8}.search-screen{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;position:relative;padding-bottom:70px}.search-bar-bottom{display:flex;padding:1rem;background-color:var(--bg-primary);border-top:2px solid var(--border-color);position:fixed;bottom:0;left:0;right:0;z-index:100}.search-form{display:flex;width:100%;gap:.5rem;align-items:center}.search-input{flex:1;padding:.75rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);font-family:inherit;font-size:1rem}.search-input:focus{outline:2px solid var(--accent-color);outline-offset:2px}.search-loading{color:var(--text-secondary);font-size:1rem;padding:0 .5rem}.search-back-button{padding:.75rem 1rem;background-color:var(--bg-primary);border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;font-size:1.5rem;font-family:inherit;white-space:nowrap;display:flex;align-items:center;justify-content:center;line-height:1;min-width:2.5rem}.search-back-button:hover{background-color:var(--accent-color);opacity:.8}:root[data-theme=c64-basic]{--bg-primary: #483AAA;--text-primary: #FFFFFF;--text-secondary: #E0E0E0;--border-color: #867ADE;--accent-color: #84C5CC}:root[data-theme=dark]{--bg-primary: #1a1a1a;--text-primary: #FFFFFF;--text-secondary: #E0E0E0;--border-color: #404040;--accent-color: #84C5CC}:root{--bg-primary: #483AAA;--text-primary: #FFFFFF;--text-secondary: #E0E0E0;--border-color: #867ADE;--accent-color: #84C5CC}*{margin:0;padding:0;box-sizing:border-box}html{height:100%;height:100dvh;overflow:hidden}body{font-family:Courier New,monospace;background-color:var(--bg-primary);color:var(--text-primary);height:100%;height:100dvh;overflow:hidden;position:fixed;width:100%}#root,.app{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}.app-loading{display:flex;align-items:center;justify-content:center;height:100%;height:100dvh;font-size:1.5rem;color:var(--text-primary)}.about-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.about-dialog{background-color:var(--bg-primary);border:2px solid var(--border-color);padding:2rem;width:90%;max-width:min(500px,calc(100% - 2rem));margin:1rem;box-shadow:0 4px 6px #0000004d;box-sizing:border-box;max-height:90vh;overflow-y:auto}.about-dialog h2{color:var(--text-primary);margin-bottom:1.5rem;font-size:1.5rem}.about-content{color:var(--text-primary);margin-bottom:1.5rem}.about-content p{margin-bottom:1rem;line-height:1.6}.about-content h3{color:var(--text-primary);font-size:1.2rem;margin-bottom:1rem;margin-top:0}.about-content h4{color:var(--text-primary);font-size:1rem;margin-bottom:.5rem;margin-top:1rem}.about-content>ul{list-style:disc;margin-left:1.5rem;margin-bottom:1rem}.about-content>ul>li{margin-bottom:.5rem;line-height:1.6}.about-content strong{color:var(--accent-color)}.about-content .copyright{color:var(--text-secondary);font-size:.9rem;margin-top:1.5rem}.about-links{margin-top:1.5rem}.about-links h3{color:var(--text-primary);font-size:1.1rem;margin-bottom:.5rem;margin-top:1rem}.about-links ul{list-style:none;padding:0;margin:0 0 1rem}.about-links li{margin-bottom:.5rem}.about-links a{color:var(--accent-color);text-decoration:none;transition:opacity .2s}.about-links a:hover{opacity:.8;text-decoration:underline}.about-dialog-actions{display:flex;justify-content:flex-end;margin-top:1.5rem}.about-close-button{padding:.75rem 1.5rem;background-color:var(--bg-primary);border:2px solid var(--border-color);color:var(--text-primary);font-size:1rem;font-family:inherit;font-weight:700;cursor:pointer;transition:all .2s}.about-close-button:hover{background-color:var(--border-color);transform:scale(1.02)}