@charset "UTF-8";:root{--bg: #000;--panel: #121212;--panel-2: #1a1a1a;--hover: #2a2a2a;--line: #2c2c2c;--text: #fff;--muted: #b3b3b3;--accent: #1ed760;--danger: #f15e6c;--radius: 10px;--player-h: 88px;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,-apple-system,Segoe UI,Noto Sans TC,PingFang TC,Microsoft JhengHei,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}h1,h2,p{margin:0}h1{font-size:clamp(28px,5vw,48px);line-height:1.15;font-weight:800}h2{font-size:20px}a{color:inherit;text-decoration:none}small{font-size:12px}ul{list-style:none;margin:0;padding:0}.muted{color:var(--muted)}.spacer{flex:1}.grow{flex:1;text-align:left}.icon{display:inline-flex;flex:none}button,select,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:8px;height:100dvh;padding:8px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom))}.sidebar{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:8px;min-height:0}.main{grid-column:2;grid-row:1;overflow-y:auto;border-radius:var(--radius);background:linear-gradient(180deg,#2a2a2a 0,var(--panel) 280px);background-color:var(--panel)}.player{grid-column:1/-1;grid-row:2}.card{background:var(--panel);border-radius:var(--radius);padding:8px}.brand{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:20px;font-weight:800;color:var(--accent)}.brand span{color:var(--text);flex:1}.brand .close-btn{display:none}.nav a,.playlists li a{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:6px;color:var(--muted);font-weight:700;transition:color .15s,background .15s}.nav a:hover,.playlists li a:hover{color:var(--text)}.nav a.active,.playlists li a.active{color:var(--text);background:var(--hover)}.count{margin-left:auto;color:var(--muted);font-weight:400}.playlists{flex:1;min-height:0;overflow-y:auto}.section-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;color:var(--muted);font-weight:700}.playlists li{position:relative;display:flex;align-items:center}.playlists li a{flex:1;min-width:0;font-weight:500}.playlists .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlists .item-action{position:absolute;right:6px;opacity:0;width:28px;height:28px;background:var(--hover)}.playlists .item-action+.item-action{right:38px}.playlists li:hover .item-action,.playlists .item-action:focus-visible{opacity:1}.playlists li:hover .count{visibility:hidden}.menu-empty{padding:10px 12px;color:var(--muted);font-size:13px}.topbar{display:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 18px;border-radius:999px;border:1px solid #727272;background:transparent;font-weight:700;transition:transform .1s,background .15s,border-color .15s}.btn:hover:not(:disabled){border-color:var(--text);transform:scale(1.03)}.btn:disabled{opacity:.6;cursor:progress}.btn-primary{background:var(--accent);border-color:var(--accent);color:#000}.btn-primary:hover:not(:disabled){border-color:var(--accent);background:#3be477}.btn-danger{background:var(--danger);border-color:var(--danger);color:#000}.btn-danger-outline{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 60%,transparent)}.icon-btn{display:inline-grid;place-items:center;position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted)}.icon-btn:hover{color:var(--text)}.icon-btn.on,.like.on{color:var(--accent)}.badge{position:absolute;right:4px;bottom:4px;font-size:9px;font-weight:800;color:var(--accent)}.play-btn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--accent);color:#000;transition:transform .1s}.play-btn:hover{transform:scale(1.06);background:#3be477}.input,.search-input,select{background:#242424;border:1px solid transparent;border-radius:6px;padding:10px 12px;width:100%}.input:focus,.search-input:focus,select:focus{outline:0;border-color:var(--text)}select{width:auto;padding:6px 10px;margin-left:6px}.page{padding:24px 24px 40px}.page-head{display:flex;align-items:flex-end;gap:24px;padding-bottom:20px}.page-head.with-cover{padding-top:12px}.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}.sort{color:var(--muted);font-size:13px}.section-title{margin:24px 0 8px}.section-title small{font-weight:400;margin-left:6px}.cover{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:6px;color:#ffffffd9}.cover.big{width:56px;height:56px}.cover.hero{width:clamp(120px,22vw,200px);height:clamp(120px,22vw,200px);border-radius:8px;box-shadow:0 8px 32px #00000080}.cover.liked{background:linear-gradient(135deg,#450af5,#8e8ee5)}.empty{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:56px 16px;color:var(--muted)}.empty h2{color:var(--text)}.empty p{max-width:420px}.search-box{display:flex;align-items:center;gap:8px;max-width:520px;background:#242424;border-radius:999px;padding:0 8px 0 16px}.search-box:focus-within{outline:2px solid var(--text)}.search-input{background:transparent;border:0;padding:12px 4px}.search-input:focus{border:0}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:#2a2a2a}.chip:hover{background:#3a3a3a}.track-head,.track-row{display:grid;grid-template-columns:40px minmax(0,1fr) 40px 56px 40px;align-items:center;gap:8px;padding:6px 8px}.track-head{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);margin-bottom:6px}.track-row{border-radius:6px;cursor:default}.track-row:hover{background:#ffffff14}.track-row.active .title{color:var(--accent)}.track-row:hover .num{display:none}.track-row:hover .hover-play,.track-row:focus-within .hover-play{display:inline-flex}.dur{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}.track-idx{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:transparent;color:var(--muted)}.hover-play{display:none;color:var(--text)}.track-row:hover .track-idx .num{display:none}.track-main{display:flex;align-items:center;gap:12px;min-width:0}.meta{min-width:0}.title,.artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title{font-weight:500}.artist{color:var(--muted);font-size:13px}.track-row .like:not(.on){opacity:0}.track-row:hover .like,.track-row .like:focus-visible{opacity:1}.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}.eq i{width:3px;height:3px;background:var(--accent);animation:eq .9s ease-in-out infinite}.eq i:nth-child(2){animation-delay:.25s}.eq i:nth-child(3){animation-delay:.5s}@keyframes eq{0%,to{height:3px}50%{height:14px}}.ctx-menu{position:fixed;z-index:50;width:240px;max-height:280px;overflow-y:auto;padding:4px;border-radius:8px;background:#282828;box-shadow:0 16px 40px #0009}.ctx-menu button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:4px;background:transparent;text-align:left}.ctx-menu button:hover{background:#ffffff1a}.ctx-menu button.danger{color:var(--danger)}.ctx-menu hr{border:0;border-top:1px solid var(--line);margin:4px 0}.menu-scroll{max-height:170px;overflow-y:auto}.player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:16px;min-height:var(--player-h);padding:8px 12px;background:var(--panel);border-radius:var(--radius)}.now{display:flex;align-items:center;gap:12px;min-width:0}.center{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}.controls{display:flex;align-items:center;gap:10px}.controls .play-btn{width:40px;height:40px}.seek{display:flex;align-items:center;gap:8px;width:100%;max-width:620px}.time{min-width:38px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.time:first-child{text-align:right}.volume{display:flex;align-items:center;justify-content:flex-end;gap:4px}.volume .slider{max-width:110px}.slider{--pct: 0%;flex:1;height:16px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}.slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#fff var(--pct),#4d4d4d var(--pct))}.slider::-moz-range-track{height:4px;border-radius:2px;background:#4d4d4d}.slider::-moz-range-progress{height:4px;border-radius:2px;background:#fff}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:#fff;opacity:0}.slider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;opacity:0}.slider:hover::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--accent) var(--pct),#4d4d4d var(--pct))}.slider:hover::-moz-range-progress{background:var(--accent)}.slider:hover::-webkit-slider-thumb,.slider:focus-visible::-webkit-slider-thumb{opacity:1}.slider:hover::-moz-range-thumb,.slider:focus-visible::-moz-range-thumb{opacity:1}.slider:disabled{cursor:default;opacity:.5}.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:#000000b3}.modal{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:12px;background:#282828;box-shadow:0 24px 60px #0009}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.toasts{position:fixed;z-index:120;left:50%;bottom:calc(var(--player-h) + 24px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{padding:10px 18px;border-radius:8px;background:#fff;color:#000;font-weight:600;box-shadow:0 8px 24px #00000080;animation:pop .2s ease-out}@keyframes pop{0%{opacity:0;transform:translateY(8px)}}.drop-overlay{position:fixed;inset:8px;z-index:90;display:grid;place-items:center;border:2px dashed var(--accent);border-radius:16px;background:#000c;font-size:22px;font-weight:700;pointer-events:none}.scrim{display:none}@media(max-width:900px){.player{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.volume{display:none}}@media(max-width:720px){.app{grid-template-columns:minmax(0,1fr);gap:6px;padding:0;padding-bottom:env(safe-area-inset-bottom)}.main{grid-column:1;border-radius:0}.player{border-radius:0;grid-template-columns:minmax(0,1fr);gap:4px;padding:8px 12px}.center{order:2}.controls{gap:18px}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:#121212eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.topbar-title{font-weight:800;color:var(--accent)}.sidebar{position:fixed;z-index:60;inset:0 auto 0 0;width:min(300px,86vw);padding:8px;padding-top:max(8px,env(safe-area-inset-top));background:var(--bg);transform:translate(-100%);transition:transform .22s ease;overflow-y:auto}.sidebar.open{transform:none}.brand .close-btn{display:inline-grid}.scrim{display:block;position:fixed;inset:0;z-index:55;background:#0009;opacity:0;pointer-events:none;transition:opacity .2s}.scrim.show{opacity:1;pointer-events:auto}.page{padding:16px 16px 32px}.page-head.with-cover{flex-direction:column;align-items:flex-start;gap:16px}.track-head{display:none}.track-row{grid-template-columns:28px minmax(0,1fr) 36px 40px}.track-row .dur{display:none}.track-row .like:not(.on){opacity:1}.playlists .item-action{opacity:1}.playlists li .count{visibility:hidden}}@media(hover:none){.playlists .item-action{opacity:1}.playlists li .count{visibility:hidden}.track-row .like:not(.on){opacity:1}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.upload-actions{display:flex;flex-direction:column;gap:8px}.upload-actions .btn{width:100%}.empty .upload-actions{flex-direction:row;flex-wrap:wrap;justify-content:center}.empty .upload-actions .btn{width:auto}.modal.cloud{width:min(640px,100%);max-height:min(86dvh,680px);gap:12px}.cloud-head{display:flex;align-items:center;justify-content:space-between}.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line)}.tabs button{padding:8px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font-weight:700}.tabs button[aria-selected=true]{color:var(--text);border-color:var(--accent)}.cloud-note{padding:14px;border-radius:8px;background:#333;color:var(--muted)}.cloud-note code{color:var(--text)}.cloud-error{color:var(--danger);font-size:13px}.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:13px;color:var(--muted)}.crumbs button{padding:2px 6px;border:0;border-radius:4px;background:transparent;color:var(--text)}.crumbs button:disabled{color:var(--muted);cursor:default}.crumbs button:not(:disabled):hover{background:var(--hover)}.crumbs .link{color:var(--muted);text-decoration:underline}.cloud-list{flex:1;min-height:160px;overflow-y:auto;border-radius:8px;background:#1f1f1f;padding:4px}.cloud-row{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;text-align:left;cursor:pointer}.cloud-row:hover{background:#ffffff14}.cloud-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cloud-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.load-more{margin:8px auto;display:flex}.cloud-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.progress-wrap{flex:1;min-width:0}.progress-text{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);margin-bottom:4px}.progress-text span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}progress{width:100%;height:6px;accent-color:var(--accent)}