:root{--bg: #0e0e0e;--surface: #181818;--surface-2: #222;--surface-3: #2a2a2a;--border: rgba(255,255,255,.07);--border-2: rgba(255,255,255,.13);--text: #f0f0f0;--text-2: #888;--text-3: #4a4a4a;--accent: #f0f0f0;--mini-h: 72px;--sheet-radius: 24px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--text);font-family:Syne,system-ui,sans-serif;user-select:none;-webkit-user-select:none}.mono{font-family:DM Mono,monospace}button{cursor:pointer;border:none;outline:none;background:none;color:inherit}input{font:inherit}#app{width:100%;height:100%;position:relative;overflow:hidden}.page{position:absolute;inset:0}.page-library{display:flex;flex-direction:column;overflow:hidden;background:var(--bg);z-index:1}.lib-header{display:flex;align-items:center;justify-content:space-between;padding:max(20px,env(safe-area-inset-top)) 20px 0;flex-shrink:0}.logo{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--text-3)}.add-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:99px;border:1px solid var(--border-2);font-size:12px;font-weight:500;color:var(--text-2);cursor:pointer;font-family:Syne,sans-serif;transition:background .15s,color .15s}.add-btn:hover{background:var(--surface-2);color:var(--text)}.add-btn i{font-size:14px}#file-picker{display:none}.lib-title-row{display:flex;align-items:baseline;justify-content:space-between;padding:22px 20px 12px;flex-shrink:0}.lib-heading{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--text)}.lib-count{font-size:11px;color:var(--text-3)}.library-list{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;padding:0 12px;padding-bottom:calc(var(--mini-h) + 16px + env(safe-area-inset-bottom))}.library-list::-webkit-scrollbar{display:none}.empty-state{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;pointer-events:none;padding-bottom:80px}.empty-state i{font-size:40px;color:var(--text-3);margin-bottom:4px}.empty-state p{font-size:15px;font-weight:600;color:var(--text-2)}.empty-sub{font-size:12px!important;font-weight:400!important;color:var(--text-3)!important}.empty-state.hidden{display:none}.track-row{display:flex;align-items:center;gap:13px;padding:9px 8px;border-radius:12px;cursor:pointer;transition:background .1s;width:100%;text-align:left;border:none;background:none;color:inherit;font-family:inherit}.track-row:hover{background:var(--surface)}.track-row:active{background:var(--surface-2)}.track-row.active{background:var(--surface)}.track-thumb{width:48px;height:48px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:18px;flex-shrink:0;overflow:hidden;position:relative}.track-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.track-thumb-eq{position:absolute;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center}.eq-bars{display:flex;align-items:flex-end;gap:2px;height:16px}.eq-bars .bar{width:3px;background:var(--text);border-radius:2px;animation:eq .65s ease-in-out infinite alternate}.eq-bars .bar:nth-child(1){height:55%;animation-delay:0s}.eq-bars .bar:nth-child(2){height:100%;animation-delay:.2s}.eq-bars .bar:nth-child(3){height:35%;animation-delay:.38s}@keyframes eq{0%{transform:scaleY(.35);opacity:.45}to{transform:scaleY(1);opacity:1}}.track-row-info{flex:1;min-width:0}.track-row-name{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.track-row-artist{font-size:12px;color:var(--text-2);margin-top:2px}.track-row-dur{font-family:DM Mono,monospace;font-size:11px;color:var(--text-3);flex-shrink:0}.mini-player{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:12px;right:12px;height:var(--mini-h);background:#2a2a2a;border-radius:16px;display:flex;align-items:center;gap:12px;padding:0 14px 0 10px;cursor:pointer;z-index:10;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s;overflow:hidden;border:1px solid var(--border-2)}.mini-player.hidden{transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none}.mini-art{width:50px;height:50px;border-radius:10px;background:var(--surface-3);display:flex;align-items:center;justify-content:center;color:var(--text-3);font-size:18px;flex-shrink:0;overflow:hidden;position:relative}.mini-art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.mini-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.mini-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-artist{font-size:11px;color:var(--text-2)}.mini-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}.mini-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text);transition:background .12s}.mini-btn:hover{background:var(--surface-3)}.mini-progress-bar{position:absolute;bottom:0;left:0;height:2px;background:var(--text-2);border-radius:0 0 0 16px;width:0%;transition:width .5s linear;pointer-events:none}.page-player{z-index:20;background:var(--surface);border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1);will-change:transform;top:max(12px,env(safe-area-inset-top))}.page-player.open{transform:translateY(0)}.page-player.dragging{transition:none}.player-handle-area{padding:12px 0 6px;display:flex;justify-content:center;align-items:center;flex-shrink:0;cursor:grab;touch-action:none}.player-handle{width:36px;height:4px;border-radius:99px;background:var(--surface-3)}.player-scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;padding:8px 24px max(32px,env(safe-area-inset-bottom)) 24px;display:flex;flex-direction:column;gap:0}.player-scroll::-webkit-scrollbar{display:none}.player-cover-wrap{flex-shrink:0;padding:8px 0 28px}.player-cover{width:100%;aspect-ratio:1;max-height:min(320px,38vh);border-radius:18px;background:var(--surface-2);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;position:relative}.player-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.player-cover-icon{font-size:56px;color:var(--text-3);opacity:.3}.player-cover-label{font-family:DM Mono,monospace;font-size:10px;letter-spacing:.14em;color:var(--text-3);position:absolute;bottom:14px;left:16px}.player-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}.player-meta-text{min-width:0;flex:1}.player-title{font-size:20px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;margin-bottom:4px}.player-artist{font-size:14px;color:var(--text-2)}.player-more-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-2);flex-shrink:0;transition:background .12s}.player-more-btn:hover{background:var(--surface-3)}.player-progress-area{margin-bottom:24px}.player-progress-track{width:100%;height:4px;background:var(--surface-3);border-radius:99px;cursor:pointer;position:relative;margin-bottom:10px}.player-progress-fill{height:100%;width:0%;background:var(--text);border-radius:99px;position:relative;transition:width .5s linear}.player-progress-thumb{width:14px;height:14px;border-radius:50%;background:var(--text);position:absolute;right:-7px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .15s}.player-progress-track:hover .player-progress-thumb{opacity:1}.player-times{display:flex;justify-content:space-between;font-family:DM Mono,monospace;font-size:11px;color:var(--text-3)}.player-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.player-ctrl-ghost{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--text-3);transition:color .12s,background .12s}.player-ctrl-ghost:hover{color:var(--text);background:var(--surface-2)}.player-ctrl-ghost.active{color:var(--text)}.player-ctrl-play{width:60px;height:60px;border-radius:50%;background:var(--text);color:var(--bg);display:flex;align-items:center;justify-content:center;font-size:24px;transition:opacity .12s,transform .1s}.player-ctrl-play:hover{opacity:.88}.player-ctrl-play:active{transform:scale(.94)}.player-volume{display:flex;align-items:center;gap:10px}.vol-icon{font-size:16px;color:var(--text-3);pointer-events:none}.vol-slider{flex:1;height:4px;-webkit-appearance:none;appearance:none;background:var(--surface-3);border-radius:99px;outline:none;cursor:pointer}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--text-2);cursor:pointer;transition:background .12s}.vol-slider:hover::-webkit-slider-thumb{background:var(--text)}
