*{box-sizing:border-box;padding:0;margin:0}:root{--bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--bg-tertiary:#2a2a2a;--text-primary:#fff;--text-secondary:#b0b0b0;--accent:#6366f1;--accent-hover:#818cf8;--border:#333;--card-bg:#1e1e1e;--card-hover:#2a2a2a}body,html{max-width:100vw;overflow-x:hidden;height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);height:100%;font-size:16px}.app-container{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden}.app-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1rem 1.5rem;text-align:center;flex-shrink:0;position:relative}.app-header h1{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.app-header .subtitle{font-size:.875rem;color:var(--text-secondary)}.upload-link{position:absolute;top:1rem;right:1.5rem;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--accent);color:var(--text-primary);text-decoration:none;border-radius:8px;font-size:.875rem;font-weight:500;transition:all .2s}.upload-link:hover{background:var(--accent-hover);transform:translateY(-2px)}.app-main{flex:1 1;overflow-y:auto;padding:1rem 1rem 100px}.file-browser{max-width:1200px;margin:0 auto}.browser-header{margin-bottom:1.5rem;display:flex;flex-direction:column;gap:1rem}.path-navigation{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.create-folder-btn{background:var(--accent);border:none;color:var(--text-primary);border-radius:8px;padding:.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.create-folder-btn:hover{background:var(--accent-hover);transform:scale(1.05)}.create-folder-input{display:flex;gap:.5rem;align-items:center;padding:.75rem;background:var(--bg-tertiary);border-radius:8px;margin-top:.5rem}.folder-name-input{flex:1 1;padding:.5rem .75rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:.875rem}.folder-name-input:focus{outline:none;border-color:var(--accent)}.cancel-btn,.create-btn{padding:.5rem 1rem;border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s}.create-btn{background:var(--accent);color:var(--text-primary)}.create-btn:hover{background:var(--accent-hover)}.cancel-btn{background:var(--bg-secondary);color:var(--text-secondary);border:1px solid var(--border)}.cancel-btn:hover{background:var(--card-hover);color:var(--text-primary)}.back-btn{background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);border-radius:8px;padding:.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.back-btn:hover{background:var(--card-hover);border-color:var(--accent)}.current-path{color:var(--text-secondary);font-size:1rem;padding:.5rem 1rem;background:var(--bg-tertiary);border-radius:8px;flex:1 1}.search-container{width:100%}.search-input{width:100%;padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:1.125rem}.search-input:focus{outline:none;border-color:var(--accent)}.sort-controls{display:flex;gap:.5rem;align-items:center}.sort-select{flex:1 1}.sort-order-btn,.sort-select{padding:.75rem 1rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;color:var(--text-primary);font-size:1rem;cursor:pointer}.sort-order-btn{min-width:48px;transition:all .2s}.sort-order-btn:hover{background:var(--card-hover);border-color:var(--accent)}.browser-content{display:flex;flex-direction:column;gap:2rem}.section-title{font-size:1rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:1rem;gap:1rem}.items-list{display:flex;flex-direction:column;gap:.5rem}.item-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:1rem;cursor:pointer;transition:all .2s;text-align:left;display:flex;align-items:center;gap:1rem;position:relative}.item-card:hover{background:var(--card-hover);border-color:var(--accent);transform:translateY(-2px)}.item-card.drag-over{border-color:var(--accent);background:rgba(99,102,241,.1);border-width:2px;border-style:dashed}.item-card[draggable=true]{cursor:-webkit-grab;cursor:grab}.item-card[draggable=true]:active{cursor:-webkit-grabbing;cursor:grabbing;opacity:.7}.file-button,.folder-button{flex:1 1;gap:1rem;text-align:left;padding:0}.file-button,.folder-button,.move-btn{display:flex;align-items:center;background:transparent;border:none;cursor:pointer}.move-btn{color:var(--text-secondary);padding:.25rem;border-radius:4px;justify-content:center;opacity:0;transition:all .2s;flex-shrink:0}.item-card:hover .move-btn{opacity:1}.move-btn:hover{background:var(--bg-tertiary);color:var(--accent)}.move-menu{position:absolute;top:100%;right:0;margin-top:.5rem;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:.5rem;min-width:150px;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.3)}.move-menu-title{font-size:.75rem;color:var(--text-secondary);padding:.5rem;border-bottom:1px solid var(--border);margin-bottom:.25rem;font-weight:600}.move-menu button{display:block;width:100%;padding:.5rem .75rem;background:transparent;border:none;color:var(--text-primary);text-align:left;cursor:pointer;border-radius:4px;font-size:.875rem;transition:all .2s}.move-menu button:hover{background:var(--bg-tertiary);color:var(--accent)}.move-menu .cancel-move{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--border);color:var(--text-secondary)}.drop-zone{transition:all .2s}.drop-zone.drag-over{border-color:var(--accent)!important;background:var(--bg-tertiary)!important;color:var(--accent)!important}.folder-card{text-align:center;padding:0;position:relative}.folder-card,.folder-card .folder-button{flex-direction:column;min-height:120px;justify-content:center}.folder-card .folder-button{padding:1rem;width:100%}.file-card{width:100%}.item-icon{color:var(--accent);flex-shrink:0}.folder-card .item-icon{margin-bottom:.5rem}.item-info{flex:1 1;min-width:0}.item-name{color:var(--text-primary);font-size:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-meta{color:var(--text-secondary);font-size:.875rem;margin-top:.25rem}.resume-indicator{display:inline-block;margin-left:.5rem;padding:.125rem .375rem;background:var(--accent);color:var(--text-primary);border-radius:4px;font-size:.8rem;font-weight:500;opacity:.9}.play-icon{color:var(--accent);opacity:0;transition:opacity .2s;flex-shrink:0}.file-card:hover .play-icon{opacity:1}.empty-state,.loading{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.audio-controls{position:fixed;bottom:0;left:0;right:0;background:var(--bg-secondary);border-top:1px solid var(--border);padding:1rem;z-index:1000;box-shadow:0 -4px 20px rgba(0,0,0,.3)}.resume-notification{position:absolute;bottom:100%;left:0;right:0;background:var(--accent);color:var(--text-primary);padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.resume-notification-btn{background:hsla(0,0%,100%,.2);border:1px solid hsla(0,0%,100%,.3);color:var(--text-primary);padding:.375rem .75rem;border-radius:6px;cursor:pointer;font-size:.75rem;font-weight:500;transition:all .2s;margin-left:1rem}.resume-notification-btn:hover{background:hsla(0,0%,100%,.3);border-color:hsla(0,0%,100%,.5)}.audio-controls-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.track-info{flex:1 1;min-width:200px}.track-name{color:var(--text-primary);font-size:1rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:.25rem}.track-time{color:var(--text-secondary);font-size:.875rem}.playback-controls{display:flex;align-items:center;gap:.5rem;flex:2 1;min-width:200px}.skip-label{font-size:.6rem;position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);white-space:nowrap}.control-btn{background:transparent;border:none;color:var(--text-primary);cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0;position:relative}.control-btn:hover{background:var(--bg-tertiary);color:var(--accent)}.progress-container{flex:1 1;min-width:100px}.progress-slider{width:100%;height:4px;border-radius:2px;background:var(--bg-tertiary);outline:none;-webkit-appearance:none;cursor:pointer}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.progress-slider::-webkit-slider-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.progress-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;-moz-transition:all .2s;transition:all .2s}.progress-slider::-moz-range-thumb:hover{background:var(--accent-hover);transform:scale(1.2)}.volume-control{position:relative;display:flex;align-items:center}.volume-slider-container{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:.5rem;padding:.5rem;background:var(--bg-tertiary);border-radius:8px;border:1px solid var(--border)}.volume-slider{width:80px;height:4px;border-radius:2px;background:var(--bg-primary);outline:none;-webkit-appearance:none;cursor:pointer;writing-mode:bt-lr;-webkit-appearance:slider-vertical}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer}.player-page{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden}.player-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);flex-shrink:0}.back-button{display:flex;align-items:center;gap:.5rem;background:transparent;border:none;color:var(--text-primary);cursor:pointer;font-size:1rem;padding:.5rem;border-radius:8px;transition:all .2s}.back-button:hover{background:var(--bg-tertiary);color:var(--accent)}.player-content{flex:1 1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 2rem 120px}.player-artwork{margin-bottom:2rem}.artwork-placeholder{width:280px;height:280px;background:var(--bg-tertiary);border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 auto;border:2px solid var(--border)}.player-info{width:100%;max-width:500px}.track-title{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:1.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-skip-controls{display:flex;justify-content:center;gap:2rem;margin-top:2rem}.skip-btn{display:flex;flex-direction:column;align-items:center;gap:.5rem;background:var(--bg-tertiary);border:1px solid var(--border);color:var(--text-primary);padding:1rem 1.5rem;border-radius:12px;cursor:pointer;transition:all .2s;font-size:.875rem}.skip-btn:hover{background:var(--card-hover);border-color:var(--accent);transform:translateY(-2px)}.skip-btn:active{transform:translateY(0)}.track-progress-info{display:flex;justify-content:space-between;color:var(--text-secondary);font-size:.875rem;margin-bottom:.5rem}.progress-bar-container{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.progress-bar{height:100%;background:var(--accent);transition:width .1s linear}@media (max-width:768px){.player-content{padding:1.5rem 1.5rem 120px}.artwork-placeholder{width:240px;height:240px}.track-title{font-size:1.25rem}}@media (max-width:480px){.artwork-placeholder{width:200px;height:200px}.track-title{font-size:1.125rem}}@media (max-width:768px){body{font-size:18px}.app-header{padding:.75rem 1rem}.app-header h1{font-size:1.5rem}.app-header .subtitle{font-size:1rem}.app-main{padding:.75rem .75rem 120px}.current-path,.item-name{font-size:1.125rem}.item-meta{font-size:1rem}.track-name{font-size:1.125rem}.track-time{font-size:1rem}.search-input{font-size:1.25rem;padding:1rem}.section-title,.sort-select{font-size:1.125rem}.browser-header{gap:.75rem}.items-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.folder-card{min-height:100px}.audio-controls,.folder-card{padding:.75rem}.audio-controls-content{flex-direction:column;gap:.75rem}.track-info{width:100%;text-align:center}.playback-controls{width:100%}.volume-control{align-self:flex-end}}@media (max-width:480px){body{font-size:18px}.items-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.folder-card{min-height:100px;padding:.75rem}.item-icon{width:28px;height:28px}.item-name,.track-name{font-size:1.125rem}.track-time{font-size:1rem}.search-input{font-size:1.25rem}.upload-link{position:static;margin-top:.5rem;align-self:center}}.upload-page{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden}.upload-header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:1.5rem;text-align:center;flex-shrink:0}.back-link{position:absolute;top:1.5rem;left:1.5rem;display:flex;align-items:center;gap:.5rem;color:var(--text-primary);text-decoration:none;padding:.5rem 1rem;border-radius:8px;transition:all .2s;font-size:.875rem}.back-link:hover{background:var(--bg-tertiary);color:var(--accent)}.upload-header h1{font-size:1.75rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.upload-header .subtitle{font-size:1rem;color:var(--text-secondary)}.upload-main{flex:1 1;overflow-y:auto;padding:2rem;gap:2rem}.upload-main,.upload-zone{display:flex;flex-direction:column;align-items:center}.upload-zone{width:100%;max-width:600px;min-height:400px;border:3px dashed var(--border);border-radius:16px;background:var(--bg-secondary);justify-content:center;padding:3rem;cursor:pointer;transition:all .3s;text-align:center}.upload-zone:hover{border-color:var(--accent);background:var(--bg-tertiary)}.upload-zone.dragging{border-color:var(--accent);background:rgba(99,102,241,.1);border-width:4px;transform:scale(1.02)}.upload-zone.uploading{cursor:not-allowed;opacity:.7}.upload-icon{color:var(--accent);margin-bottom:1.5rem}.upload-zone h2{font-size:1.5rem;font-weight:600;color:var(--text-primary);margin-bottom:.5rem}.upload-zone p{color:var(--text-secondary);font-size:1rem;margin-bottom:.5rem}.upload-hint{font-size:.875rem;color:var(--text-secondary);margin-top:1rem;opacity:.7}.upload-status{display:flex;flex-direction:column;align-items:center;gap:1rem}.upload-spinner{width:48px;height:48px;border:4px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.upload-results{width:100%;max-width:600px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;padding:1.5rem}.upload-results h3{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem}.results-list{display:flex;flex-direction:column;gap:.75rem}.result-item{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem;background:var(--bg-tertiary);border-radius:8px;border-left:3px solid transparent}.result-item.success{border-left-color:#10b981}.result-item.error{border-left-color:#ef4444}.result-icon{flex-shrink:0;margin-top:.125rem}.result-item.success .result-icon{color:#10b981}.result-item.error .result-icon{color:#ef4444}.result-info{flex:1 1;min-width:0}.result-name{font-size:.875rem;font-weight:500;color:var(--text-primary);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-message{font-size:.75rem;color:var(--text-secondary)}@media (max-width:768px){.upload-header{padding:1rem}.back-link{position:static;margin-bottom:1rem;justify-content:center}.upload-header h1{font-size:1.5rem}.upload-main{padding:1rem}.upload-zone{min-height:300px;padding:2rem 1rem}.upload-zone h2{font-size:1.25rem}.upload-results{padding:1rem}}.marker-list-container{margin-top:2rem;width:100%;max-width:500px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:12px;overflow:hidden}.marker-list-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--bg-tertiary);border-bottom:1px solid var(--border)}.marker-toggle-btn{display:flex;align-items:center;gap:.5rem;background:transparent;border:none;color:var(--text-primary);cursor:pointer;font-size:.875rem;font-weight:500;padding:.5rem;border-radius:6px;transition:all .2s;flex:1 1;text-align:left}.marker-toggle-btn:hover{background:var(--card-hover);color:var(--accent)}.marker-actions{display:flex;gap:.5rem;align-items:center}.marker-action-btn{background:transparent;border:1px solid var(--border);color:var(--text-primary);cursor:pointer;padding:.375rem;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s}.marker-action-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--text-primary)}.marker-action-btn.delete-all-btn:hover{background:#ef4444;border-color:#ef4444}.marker-list-content{max-height:300px;overflow-y:auto;padding:.5rem}.marker-empty-state{padding:2rem 1rem;text-align:center;color:var(--text-secondary);font-size:.875rem}.marker-list{display:flex;flex-direction:column;gap:.5rem}.marker-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:var(--card-bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;position:relative}.marker-item:hover{background:var(--card-hover);border-color:var(--accent);transform:translateX(4px)}.marker-item.marker-active{background:rgba(99,102,241,.1);border-color:var(--accent);border-width:2px}.marker-time{font-size:.875rem;font-weight:600;color:var(--accent);min-width:60px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.marker-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.marker-edit-input,.marker-name{flex:1 1;font-size:.875rem;color:var(--text-primary)}.marker-edit-input{padding:.25rem .5rem;background:var(--bg-tertiary);border:1px solid var(--accent);border-radius:4px;font-family:inherit}.marker-edit-input:focus{outline:none;border-color:var(--accent);background:var(--bg-secondary)}.marker-delete-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:.25rem;border-radius:4px;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s;flex-shrink:0}.marker-item:hover .marker-delete-btn{opacity:1}.marker-delete-btn:hover{background:rgba(239,68,68,.1);color:#ef4444}@media (max-width:768px){.marker-list-container{margin-top:1.5rem}.marker-list-header{padding:.625rem .75rem}.marker-toggle-btn{font-size:.8125rem}.marker-item{padding:.625rem}.marker-time{min-width:55px}.marker-name,.marker-time{font-size:.8125rem}.marker-list-content{max-height:250px}}