#file-input-area{display:inline-flex;align-items:center;position:relative;border:2px dashed var(--gray-400);border-radius:var(--border-radius-sm);padding:2px;cursor:pointer;background-color:var(--gray-100);transition:var(--transition)}#file-input-area.drag-over{background-color:var(--gray-200);border-color:var(--primary)}#file-input-area .button-like-label{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs, 4px);background-color:var(--primary);color:#fff;border:1px solid var(--primary-dark);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.85rem;font-weight:500;white-space:nowrap;transition:var(--transition)}#file-input-area .button-like-label:hover{background-color:var(--primary-dark)}#file-input-area input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#controls{display:flex;flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-md) 0}#controls-top{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center}#controls-playback{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}#controls-top button{min-width:100px}#controls-playback button{min-width:auto;padding:var(--spacing-sm)}#controls-playback #playSelected{min-width:80px;padding:var(--spacing-sm) var(--spacing-md)}#controls-playback #stopTrack{color:var(--danger, #ef233c);border-color:var(--danger, #ef233c)}#controls-playback #stopTrack:hover:not(:disabled){background-color:var(--danger, #ef233c);color:#fff}#volume-control{display:flex;align-items:center;gap:4px;margin-left:auto}#volume-btn{min-width:auto!important;padding:var(--spacing-sm);background:transparent;border-color:transparent;color:var(--text-muted)}#volume-btn:hover{border-color:var(--border-color);color:var(--text-color);background:transparent}#volume-bar{width:80px;cursor:pointer;accent-color:var(--primary)}#controls-scrub{display:flex;align-items:center;gap:var(--spacing-sm)}#scrub-bar{flex:1;min-width:0;cursor:pointer;accent-color:var(--primary);height:4px}#scrub-current,#scrub-duration{font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:3.2em;white-space:nowrap}#scrub-duration{text-align:right}#now-playing{font-size:.95rem;color:var(--text-muted);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--gray-100);border-radius:var(--border-radius-sm);text-align:center;margin-top:var(--spacing-sm)}#now-playing #currentTrackName{font-weight:600;color:var(--text-color)}#playlist-section{margin-bottom:var(--spacing-lg)}#playlist-section h2{margin-top:0;color:var(--gray-800);border-bottom:1px solid var(--gray-200);padding-bottom:var(--spacing-sm)}#file-list-container{max-height:80vh;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);background-color:var(--card-bg)}#fileList{list-style:none;padding:0;margin:0;columns:1;column-fill:auto;column-gap:var(--spacing-xl, 32px);column-rule:1px solid var(--gray-200)}#fileList li{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--gray-200);cursor:pointer;transition:background-color .15s ease;font-size:.9rem;break-inside:avoid}#fileList li:last-child{border-bottom:none}#fileList li:hover{background-color:var(--gray-100)}#fileList li.selected{background-color:#4361ee14;border-left:3px solid var(--primary)}#fileList li.playing{background-color:#06d6a01a;border-left:3px solid var(--success);font-weight:500}#fileList li .track-number{flex-shrink:0;min-width:2em;text-align:right;font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums}#fileList li input[type=checkbox]{flex-shrink:0}#fileList li .file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#fileList li .drag-handle{flex-shrink:0;color:var(--text-muted);cursor:grab;padding:0 2px;opacity:.3;transition:opacity .15s;display:flex;align-items:center}#fileList li:hover .drag-handle{opacity:.7}#fileList li.dragging{opacity:.4;background-color:var(--gray-100)}#fileList li.drag-over-top{box-shadow:inset 0 3px 0 var(--primary)}#fileList li.drag-over-bottom{box-shadow:inset 0 -3px 0 var(--primary)}main>section{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-lg);box-shadow:var(--box-shadow-sm);margin-bottom:var(--spacing-lg)}#app-description-section p{font-size:1.05rem;color:var(--text-muted);text-align:center;margin:0}#controls-heading,#app-main-heading{color:var(--gray-800)}body.dark-theme #file-input-area{background-color:var(--gray-100);border-color:var(--gray-400)}body.dark-theme #file-input-area.drag-over{background-color:var(--gray-200);border-color:var(--primary)}body.dark-theme #file-list-container{border-color:var(--border-color);background-color:var(--card-bg)}body.dark-theme #fileList li{border-bottom-color:var(--gray-200)}body.dark-theme #fileList li:hover{background-color:var(--gray-100)}body.dark-theme #fileList li.selected{background-color:#6b8cff1a}body.dark-theme #fileList li.playing{background-color:#06d6a014}body.dark-theme #now-playing{background-color:var(--gray-100)}body.dark-theme #fileList{column-rule-color:var(--gray-200)}body.dark-theme main>section{background-color:var(--card-bg);border-color:var(--border-color)}@media (max-width: 768px){#controls-top{justify-content:center}#controls-top button{min-width:auto}#controls-playback{flex-wrap:wrap;justify-content:center}#volume-control{margin-left:0;width:100%;justify-content:center}#volume-bar{width:120px}#fileList{columns:1!important;height:auto!important;column-rule:none}#file-list-container{max-height:55vh}main>section{padding:var(--spacing-md)}}@media (max-width: 480px){#file-list-container{max-height:50vh}}