:root{--bg: #0f0f12;--bg-2: #1a1a1f;--text: #ffffff;--hint: #8b8b93;--link: #7ab7ff;--accent: #ff5c3a;--accent-text: #ffffff;--row: 64px;--nav: 56px;--mini: 56px;--radius: 14px;--safe-b: env(safe-area-inset-bottom, 0px);color-scheme:dark}:root[data-theme=light]{--bg: #ffffff;--bg-2: #f2f2f6;--text: #111114;--hint: #6f6f78;--link: #2b6fd6;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:15px/1.35 -apple-system,BlinkMacSystemFont,Roboto,Segoe UI,system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}input{font:inherit}.app{display:grid;grid-template-rows:1fr auto auto;height:100%}.screen{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px calc(24px + var(--safe-b))}.screen.flush{padding:0;overflow:hidden}h1{font-size:28px;font-weight:700;margin:20px 0 16px}h2{font-size:16px;font-weight:600;margin:24px 0 8px;display:flex;justify-content:space-between;align-items:center}.hint{color:var(--hint);font-size:14px}.cap{color:var(--hint);font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:22px;background:var(--accent);color:var(--accent-text);font-weight:600}.btn.ghost{background:var(--bg-2);color:var(--text)}.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:22px;color:var(--text)}.iconbtn.on{color:var(--accent)}.iconbtn.hint{color:var(--hint)}.nav{display:grid;grid-template-columns:repeat(3,1fr);height:calc(var(--nav) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--bg-2);border-top:1px solid rgba(128,128,128,.15)}.nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:var(--hint)}.nav button.on{color:var(--accent)}.mini{position:relative;display:grid;grid-template-columns:40px 1fr 44px 44px;gap:12px;align-items:center;height:var(--mini);padding:0 12px 0 16px;background:var(--bg-2);border-top:1px solid rgba(128,128,128,.15)}.mini .bar{position:absolute;top:0;left:0;height:2px;background:var(--accent)}.mini img,.mini .noart{width:40px;height:40px;border-radius:6px;object-fit:cover;background:#80808040}.mini .t{overflow:hidden;text-align:left}.mini .t b,.mini .t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini .t b{font-weight:500;font-size:14px}.mini .t span{font-size:12px;color:var(--hint)}.row{display:grid;grid-template-columns:48px 1fr auto auto;gap:12px;align-items:center;height:var(--row);width:100%;text-align:left}.row img,.row .noart{width:48px;height:48px;border-radius:6px;object-fit:cover;background:#80808040}.row .t{overflow:hidden;text-align:left}.row .t b,.row .t span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .t b{font-weight:500;font-size:16px}.row .t span{font-size:14px;color:var(--hint)}.row.now .t b{color:var(--accent)}.row.dim{opacity:.5}.player{position:relative;height:100%;display:flex;flex-direction:column;padding:12px 16px calc(16px + var(--safe-b));overflow:hidden}.player .bgart{position:absolute;top:-40px;right:-40px;bottom:-40px;left:-40px;background-size:cover;background-position:center;filter:blur(40px) saturate(1.2);opacity:.55;z-index:0}.player .shade{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,#00000026,#0009);z-index:0}.player>*{position:relative;z-index:1}.player .top{display:flex;align-items:center;justify-content:space-between;min-height:44px;color:#fff}.player .moods{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:none}.player .moods::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;height:32px;padding:0 14px;border-radius:16px;background:#ffffff24;color:#fff;font-size:13px}.chip.on{background:var(--accent)}.player .art{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:12px 0}.player .art img,.player .art .noart{width:min(78vw,60vh);aspect-ratio:1;border-radius:16px;object-fit:cover;box-shadow:0 20px 60px #00000080;background:#ffffff1a}.player .meta{color:#fff}.player .meta b{display:block;font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player .meta span{display:block;font-size:15px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{margin:14px 0 4px;height:24px;display:flex;align-items:center;cursor:pointer}.progress .track{position:relative;width:100%;height:4px;border-radius:2px;background:#ffffff40}.progress .fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--accent)}.progress .knob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:7px;background:#fff}.times{display:flex;justify-content:space-between;font-size:12px;color:#ffffffbf}.controls{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-top:10px;color:#fff}.controls .mid{display:flex;align-items:center;justify-content:center;gap:20px}.playbtn{position:relative;width:72px;height:72px;border-radius:36px;background:var(--accent);color:var(--accent-text);display:inline-flex;align-items:center;justify-content:center}.playbtn svg{width:32px;height:32px}.playbtn .spin{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;border:2px solid transparent;border-top-color:#fff;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:absolute;left:16px;right:16px;top:64px;padding:10px 14px;border-radius:10px;background:#000000b3;color:#fff;font-size:14px;text-align:center}.searchbox{position:sticky;top:0;z-index:2;padding:12px 0;background:var(--bg)}.searchbox .field{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;background:var(--bg-2)}.searchbox input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font-size:16px}.artists{display:flex;gap:16px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}.artists::-webkit-scrollbar{display:none}.artists button{flex:0 0 auto;width:76px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px}.artists img,.artists .noart{width:64px;height:64px;border-radius:32px;object-fit:cover;background:#80808040}.artists span{max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.skeleton{height:var(--row);display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center}.skeleton i{display:block;height:48px;border-radius:6px;background:#8080802e}.skeleton b{display:block;height:12px;width:60%;border-radius:6px;background:#8080802e;margin-bottom:8px}.skeleton b+b{width:40%}.empty{padding:48px 16px;text-align:center;color:var(--hint)}.empty .btn{margin-top:16px}.link{color:var(--link)}.chips{display:flex;gap:8px;margin:4px 0 8px}.chips .chip{background:var(--bg-2);color:var(--text)}.chips .chip.on{background:var(--accent);color:var(--accent-text)}.lib-item{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;height:72px;width:100%;text-align:left}.lib-item .ico{width:56px;height:56px;border-radius:10px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--accent);overflow:hidden}.lib-item .ico img{width:100%;height:100%;object-fit:cover}.lib-item b{display:block;font-weight:500;font-size:16px}.lib-item span{display:block;font-size:14px;color:var(--hint)}.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 16px}.hero img,.hero .noart{width:160px;height:160px;border-radius:12px;object-fit:cover;background:#80808040}.hero.round img,.hero.round .noart{border-radius:80px}.hero h1{margin:16px 0 4px;font-size:24px}.hero .actions{display:flex;gap:12px;margin-top:16px}.topbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:52px;margin:0 -16px;padding:0 4px;background:var(--bg)}.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}.albums button{text-align:left}.albums img,.albums .noart{width:100%;aspect-ratio:1;border-radius:8px;object-fit:cover;background:#80808040}.albums b{display:block;font-size:14px;font-weight:500;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.albums span{font-size:12px;color:var(--hint)}.sheet-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:20;animation:fade .2s}.sheet{position:fixed;left:0;right:0;bottom:0;z-index:21;background:var(--bg-2);border-radius:16px 16px 0 0;padding:8px 16px calc(16px + var(--safe-b));animation:up .2s ease-out;max-height:80vh;overflow-y:auto}.sheet .grip{width:36px;height:4px;border-radius:2px;background:#80808066;margin:4px auto 12px}.sheet .item{display:flex;align-items:center;gap:16px;width:100%;height:52px;text-align:left;font-size:16px}.sheet .item svg{color:var(--hint)}.sheet .head{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid rgba(128,128,128,.2)}.sheet .head img{width:48px;height:48px;border-radius:6px;object-fit:cover}.sheet input.text{width:100%;height:44px;padding:0 12px;border-radius:10px;border:1px solid rgba(128,128,128,.3);background:var(--bg);color:var(--text);outline:0;margin:8px 0 12px}@keyframes up{0%{transform:translateY(100%)}to{transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:var(--bg);animation:up .25s ease-out}.banner{padding:8px 16px;background:#b8860b;color:#fff;font-size:13px;text-align:center}
