:root{--bg:#121317;--panel:#1a1c22;--panel-2:#22252d;--border:#2d313b;--text:#e8e9ee;--muted:#9097a5;--accent:#5b8cff;--danger:#ff6b6b;--sidebar-w:260px;--player-h:76px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:6px 10px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:default}input{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:6px 10px}code{background:var(--panel-2);border-radius:4px;padding:1px 6px}.app{flex-direction:column;height:100%;display:flex}.topbar{background:var(--panel);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:10px 14px;display:flex}.crumb{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-size:18px;overflow:hidden}.search{width:260px}.me{color:var(--muted)}.burger{display:none}.mode-btn.on{background:var(--accent);border-color:var(--accent);color:#fff}.body{flex:1;min-height:0;display:flex}.sidebar-wrap{width:var(--sidebar-w);border-right:1px solid var(--border);background:var(--panel);flex:none;overflow-y:auto}.sidebar{padding:12px}.sidebar h2{text-transform:uppercase;color:var(--muted);letter-spacing:.06em;margin:4px 6px 8px;font-size:12px}.sidebar ul{margin:0 0 10px;padding:0;list-style:none}.pl-item{border:1px solid #0000;border-radius:8px;align-items:center;display:flex}.pl-item.active{background:var(--panel-2)}.pl-item.over{border-color:var(--accent);background:#5b8cff2e}.pl-main{text-align:left;background:0 0;border:none;flex:1;align-items:center;gap:8px;min-width:0;display:flex}.pl-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.pl-count{color:var(--muted);font-size:12px}.pl-actions{gap:2px;padding-right:4px;display:none}.pl-item:hover .pl-actions{display:flex}.pl-actions button{background:0 0;border:none;padding:2px 6px}.new-pl,.new-pl-input{width:100%}.main{flex:1;min-width:0;padding-bottom:8px;overflow:auto}.selection-bar{z-index:2;border-bottom:1px solid var(--accent);background:#5b8cff2e;align-items:center;gap:12px;padding:8px 14px;display:flex;position:sticky;top:0}.tracks{border-collapse:collapse;width:100%}.tracks th{background:var(--bg);text-align:left;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap;-webkit-user-select:none;user-select:none;padding:8px;font-weight:500;position:sticky;top:0}.tracks th.sortable{cursor:pointer}.tracks th.sortable:hover{color:var(--text)}.tracks td{border-bottom:1px solid var(--border);vertical-align:middle;padding:6px 8px}.track-row{cursor:default;-webkit-user-select:none;user-select:none;touch-action:manipulation}.track-row:hover{background:var(--panel)}.track-row.selected{background:#5b8cff33}.track-row.current .cell-title{color:var(--accent)}.col-play{width:44px}.col-cover{width:52px}.col-duration{width:80px}.col-date{width:120px}.col-menu{width:48px}.cover{background:linear-gradient(135deg,#3c4b7a,#5b3c7a);border-radius:6px;place-items:center;width:36px;height:36px;display:grid}.cell-title{font-weight:500}.cell-sub{color:var(--muted);font-size:12px}.only-mobile{display:none}.play-btn{border-radius:50%;width:32px;height:32px;padding:0}.icon-btn{padding:2px 8px}.empty{text-align:center;color:var(--muted);padding:40px}.row-menu{position:relative}.menu{z-index:20;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:2px;min-width:200px;max-height:300px;padding:4px;display:flex;position:absolute;top:100%;right:0;overflow-y:auto;box-shadow:0 8px 24px #00000080}.menu button{text-align:left;background:0 0;border:none}.menu button:hover:not(:disabled){background:var(--border)}.menu .danger{color:var(--danger)}.drag-chip{background:var(--accent);color:#fff;border-radius:8px;padding:8px 14px;box-shadow:0 6px 20px #00000080}.toast{left:50%;bottom:calc(var(--player-h) + 12px);background:var(--danger);color:#fff;cursor:pointer;z-index:50;border-radius:8px;padding:8px 16px;position:fixed;transform:translate(-50%)}.player{height:var(--player-h);background:var(--panel);border-top:1px solid var(--border);flex:none;grid-template-columns:minmax(120px,1fr) auto minmax(200px,2fr) 150px;align-items:center;gap:16px;padding:0 16px;display:grid}.player-title{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.player-artist{color:var(--muted);font-size:12px}.player-controls{align-items:center;gap:6px;display:flex}.player-controls .big{background:var(--accent);border-color:var(--accent);border-radius:50%;width:40px;height:40px;padding:0}.player-progress,.player-volume{color:var(--muted);align-items:center;gap:8px;font-size:12px;display:flex}.player-progress input,.player-volume input{min-width:0;accent-color:var(--accent);flex:1;padding:0}.login{text-align:center;max-width:420px;margin:15vh auto;padding:0 16px}@media (width<=760px){.burger{display:inline-block}.search{width:130px}.me,.mode-btn{display:none}.sidebar-wrap{z-index:30;background:#00000080;border:none;width:auto;display:none;position:fixed;inset:0}.sidebar-wrap.open{display:block}.sidebar-wrap>div{background:var(--panel);width:min(80vw,300px);height:100%;overflow-y:auto}.pl-actions{display:flex}.col-artist,.col-date,.col-duration,.col-cover{display:none}.only-mobile{display:block}.player{--player-h:auto;grid-template-columns:1fr auto;grid-template-areas:"info controls""progress progress";gap:6px 12px;height:auto;padding:8px 12px}.player-info{grid-area:info}.player-controls{grid-area:controls}.player-progress{grid-area:progress}.player-volume{display:none}}