.loader{display:flex;justify-content:center;align-items:center}.loader svg rect{fill:#fff0;stroke:#888;stroke-dasharray:80;stroke-dashoffset:500;animation:dash 1.5s steps(16,end) infinite}@keyframes dash{to{stroke-dashoffset:0}}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:Lucida Grande,Geneva,Trebuchet MS,Helvetica Neue,Helvetica,sans-serif;font-size:11px;color:#1a1a1a;background:#d6d2ce;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:flex;flex-direction:column;height:100vh;border:1px solid #888;background:linear-gradient(180deg,#d8d8d8,#c8c8c8,#d2d2d2 4%,#cacaca,#d0d0d0 12%,#c6c6c6 20%,#d0d0d0)}#toolbar{height:68px;min-height:68px;border-bottom:1px solid #888;background:linear-gradient(180deg,#e8e8e8,#d0d0d0 45%,#c4c4c4 55%,#d4d4d4)}#player{display:flex;align-items:center;height:100%;padding:0 12px;gap:12px}#transport{display:flex;align-items:center;gap:2px;flex-shrink:0}.transport-btn{width:28px;height:24px;border:1px solid #999;border-radius:4px;background:linear-gradient(180deg,#fafafa,#e0e0e0 45%,#d0d0d0 55%,#e8e8e8);color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;outline:none;box-shadow:0 1px #ffffff80,inset 0 1px #ffffff4d}.transport-btn:active{background:linear-gradient(180deg,#c8c8c8,#b8b8b8,silver);box-shadow:inset 0 1px 2px #0003}.transport-btn svg{display:block}.play-btn{width:36px;height:28px;border-radius:16px}#lcd-display{flex:1;max-width:400px;height:40px;background:linear-gradient(180deg,#282840,#1a1a2e);border:1px solid #0a0a14;border-radius:5px;padding:4px 10px;box-shadow:inset 0 1px 4px #0009,0 1px #ffffff4d;display:flex;flex-direction:column;justify-content:center;margin:0 auto}#lcd-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}#lcd-title{color:#b8d4e8;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-shadow:0 0 6px rgba(100,160,220,.3)}#lcd-time{color:#6a8a9e;font-size:10px;margin-left:10px;flex-shrink:0;font-variant-numeric:tabular-nums}.lcd-link{color:#6a8a9e;margin-right:6px;opacity:.6;transition:opacity .15s;display:inline-flex;align-items:center;vertical-align:middle}.lcd-link:hover{opacity:1;color:#b8d4e8}.lcd-link svg{display:block}#lcd-progress-bar{height:4px;background:#0d0d1a;border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.3);cursor:pointer}#lcd-progress-fill{height:100%;background:#5a9ed6;border-radius:2px;transition:width .3s linear}#volume-control{display:flex;align-items:center;gap:4px;flex-shrink:0}#volume-control .vol-icon{color:#666;flex-shrink:0}.volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:70px;height:4px;background:linear-gradient(180deg,#999,#bbb);border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:linear-gradient(180deg,#f8f8f8,#d0d0d0);border:1px solid #888;border-radius:50%;box-shadow:0 1px 2px #0003;cursor:pointer}#content-area{flex:1;display:flex;overflow:hidden;border-bottom:1px solid #888}#source-list{width:200px;min-width:200px;background:linear-gradient(180deg,#e0e0e0,#d0d0d0);border-right:1px solid #b0b0b0;display:flex;flex-direction:column;overflow:hidden}#source-list-header{padding:6px;border-bottom:1px solid #b0b0b0;background:linear-gradient(180deg,#e8e8e8,#d8d8d8)}.source-search{width:100%;height:20px;border:1px solid #aaa;border-radius:10px;padding:0 8px;font-size:10px;font-family:Lucida Grande,Geneva,Trebuchet MS,Helvetica Neue,Helvetica,sans-serif;background:#fff;outline:none;box-shadow:inset 0 1px 2px #0000001a}.source-search:focus{border-color:#69c;box-shadow:inset 0 1px 2px #0000001a,0 0 3px #6496c866}.source-search::placeholder{color:#999}#source-list-items{flex:1;overflow-y:auto;overflow-x:hidden}#source-list-items::-webkit-scrollbar{width:8px}#source-list-items::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}#source-list-items::-webkit-scrollbar-track{background:#ddd}.source-items{list-style:none;margin:0;padding:0}.source-item{padding:2px 8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:18px;color:#1a1a1a;border-bottom:none}.source-item:hover{background:#0000000f}.source-item.selected{background:linear-gradient(180deg,#3d80df,#2060c0);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.3);border-radius:2px;margin:0 4px}#track-list{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#fff}.track-list-content{display:flex;flex-direction:column;height:100%;overflow:hidden}.track-list-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:13px;background:#fff}#column-headers{display:flex;height:17px;min-height:17px;background:linear-gradient(180deg,#fafafa,#e8e8e8);border-bottom:1px solid #ccc;font-size:10px;color:#555;font-weight:400;-webkit-user-select:none;user-select:none}#column-headers .col{display:flex;align-items:center;padding:0 6px;border-right:1px solid #ccc}#column-headers .col:last-child{border-right:none}#column-headers .sortable{cursor:pointer}#column-headers .sortable:hover{background:linear-gradient(180deg,#f0f0f0,#ddd)}.col-num{width:30px;min-width:30px;justify-content:center;font-size:9px;color:#888}.col-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.col-position{width:80px;min-width:80px}.col-sort-arrow{width:8px;height:8px;margin-left:3px;opacity:.6}.col-sort-arrow.asc{transform:rotate(180deg)}.col-sort-arrow.desc{transform:rotate(0)}.track-rows{flex:1;overflow-y:auto;overflow-x:hidden}.track-rows::-webkit-scrollbar{width:8px}.track-rows::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}.track-rows::-webkit-scrollbar-track{background:#f0f0f0}.track-row{display:flex;height:19px;min-height:19px;align-items:center;font-size:11px;cursor:default;border-bottom:1px solid rgba(0,0,0,.04)}.track-row:nth-child(odd){background:#edf3fe}.track-row:nth-child(2n){background:#fff}.track-row:hover{background:#d8e8f8}.track-row .col{padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-selected{background:linear-gradient(180deg,#3d80df,#2860c0)!important;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}.track-selected .col-num{color:#fff}.track-selected:hover{background:linear-gradient(180deg,#4d90ef,#3870d0)!important}.track-rejected{color:#aaa;font-style:italic;pointer-events:none;background:#f8f8f8!important}.toggle-rejects{padding:4px 10px;font-size:10px;font-family:Lucida Grande,Geneva,Trebuchet MS,Helvetica Neue,Helvetica,sans-serif;color:#666;background:linear-gradient(180deg,#f4f4f4,#e4e4e4);border:1px solid #ccc;border-radius:3px;cursor:pointer;margin:6px;align-self:flex-start;outline:none}.toggle-rejects:hover{background:linear-gradient(180deg,#eee,#ddd)}#album-art-panel{border-top:1px solid #b0b0b0;background:linear-gradient(180deg,#d8d8d8,#c8c8c8);padding:8px;flex-shrink:0}#album-art-panel img{width:100%;height:auto;display:block;border:1px solid #999;border-radius:2px;box-shadow:0 1px 4px #00000040}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));align-content:start;gap:12px;padding:12px;overflow-y:auto;flex:1}.album-grid::-webkit-scrollbar{width:8px}.album-grid::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}.album-grid::-webkit-scrollbar-track{background:#f0f0f0}.album-item{cursor:pointer;text-align:center;padding:6px;border-radius:4px;transition:background-color .15s}.album-item:hover{background:#e0ecf8}.album-selected{background:linear-gradient(180deg,#3d80df,#2860c0)!important;color:#fff;border-radius:4px}.album-selected .album-title{color:#fff}.album-art-wrapper{width:100%;padding-bottom:100%;position:relative;overflow:hidden;border-radius:3px;border:1px solid #ccc;background:#f0f0f0;box-shadow:0 1px 3px #00000026;margin-bottom:4px}.album-art-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.album-art-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e8e8e8,#d0d0d0)}.album-title{font-size:10px;line-height:1.2;color:#1a1a1a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}#status-bar{height:22px;min-height:22px;background:linear-gradient(180deg,#e8e8e8,#d0d0d0);border-top:1px solid #b0b0b0;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#555;padding:0 8px}#status-left,#status-right{display:flex;align-items:center;gap:2px;min-width:50px}#status-right{justify-content:flex-end}#status-center{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-link{color:#555;text-decoration:underline!important}.status-link:hover{color:#333}.status-btn{background:none;border:none;color:#777;cursor:pointer;padding:1px 4px;display:flex;align-items:center;justify-content:center;border-radius:2px;outline:none}.status-btn:hover{color:#333;background:#00000014}.status-btn.active{color:#333;background:#0000001f;box-shadow:inset 0 1px 2px #00000026}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-window{width:340px;background:linear-gradient(180deg,#e8e8e8,#d4d4d4);border:1px solid #888;border-radius:8px;box-shadow:0 8px 32px #0006,0 2px 8px #0003;overflow:hidden}.modal-titlebar{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:linear-gradient(180deg,#e0e0e0,#ccc);border-bottom:1px solid #aaa;font-size:11px;font-weight:700;color:#333}.modal-close{background:none;border:none;font-size:16px;color:#666;cursor:pointer;padding:0 2px;line-height:1;outline:none}.modal-close:hover{color:#000}.modal-body{padding:16px 20px;font-size:12px;line-height:1.5;color:#333}.modal-body p{margin:0 0 10px}.modal-body p:last-child{margin-bottom:0}.modal-body a{color:#2060c0;text-decoration:underline!important}.modal-body a:hover{color:#104090}.loader-wrap{display:flex;align-items:center;justify-content:center;height:100%;width:100%;padding:20px}.login-input{width:100%;padding:6px 8px;margin:8px 0;border:1px solid #bbb;border-radius:4px;font-size:13px;box-sizing:border-box}.login-error{color:#c0392b;font-size:12px;margin:4px 0}.login-submit{padding:6px 14px;font-size:13px;border:1px solid #999;border-radius:4px;background:linear-gradient(#fff,#e8e8e8);cursor:pointer}.login-submit:hover{background:linear-gradient(#fff,#ddd)}