:root{color-scheme:dark;--bg:#11120f;--card:#1b1d18;--line:#303329;--text:#f4f2e9;--sub:#a9ad9c;--accent:#d9ff66;--danger:#ff7d73;font-family:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 90% -10%,#30431d 0,transparent 35%),var(--bg);color:var(--text);min-height:100vh;padding:0 20px 150px}
main{max-width:760px;margin:auto}
header{display:flex;align-items:center;justify-content:space-between;padding:52px 2px 28px}
h1{font-size:42px;letter-spacing:-2px;margin:2px 0}
.eyebrow{font-size:11px;letter-spacing:2px;color:var(--accent);margin:0}
.round{width:48px;height:48px;border-radius:50%;font-size:28px;padding:0}
.card{background:rgba(27,29,24,.9);border:1px solid var(--line);border-radius:22px;padding:24px}
.auth{max-width:440px}.auth p,.empty p{color:var(--sub);line-height:1.5}
input{width:100%;background:#10110e;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:16px;padding:14px;margin:8px 0 12px}
button{border:0;border-radius:12px;background:var(--accent);color:#151712;font-weight:750;padding:13px 18px;cursor:pointer}
.auth button,form>button{width:100%}
.librarySummary{min-height:18px;margin:0 2px 12px;color:var(--sub);font-size:13px}
.tracks{display:grid;gap:10px}
.track{display:grid;grid-template-columns:58px 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px;transition:border-color .2s,background .2s}
.track.playing{border-color:#708637;background:#20251a}.track.playing h3{color:var(--accent)}
.track img{width:58px;height:58px;object-fit:cover;border-radius:10px;background:#292c23}
.track h3{font-size:16px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track p{font-size:13px;color:var(--sub);margin:0}.track .more{background:transparent;color:var(--sub);font-size:20px;padding:10px}
.status{color:var(--accent)!important}.status.failed{color:var(--danger)!important}
.empty{text-align:center;padding:80px 20px}.empty span{font-size:62px;color:var(--accent)}
.player{position:fixed;z-index:3;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(700px,calc(100% - 28px));background:rgba(31,34,27,.94);border:1px solid #414637;border-radius:20px;padding:10px 12px 9px;backdrop-filter:blur(22px);box-shadow:0 16px 40px #0008}
.playerMain{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px}
.player img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#292c23}
.playerText{min-width:0}.playerText strong,.playerText span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playerText span{font-size:12px;color:var(--sub);margin-top:4px}
.playerControls{display:flex;align-items:center;gap:5px}.player button{border-radius:50%;width:42px;height:42px;padding:0}.player .transport{background:transparent;color:var(--text);font-size:31px;font-weight:400}
.timeline{display:grid;grid-template-columns:34px 1fr 38px;align-items:center;gap:6px;color:var(--sub);font-size:10px;margin-top:5px}
.timeline input{appearance:none;margin:0;padding:0;height:3px;border:0;border-radius:4px;background:#555b4b;accent-color:var(--accent)}
.timeline input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--accent)}
dialog{width:min(480px,calc(100% - 28px));border:1px solid var(--line);border-radius:22px;background:var(--card);color:var(--text);padding:0}
dialog::backdrop{background:#000a;backdrop-filter:blur(4px)}dialog form{padding:22px}.dialogTitle{display:flex;justify-content:space-between;align-items:center}.dialogTitle h2{margin:0 0 20px}.plain{width:auto;background:transparent;color:var(--sub);font-size:18px}.error{min-height:18px;color:var(--danger);font-size:13px}
@media(max-width:520px){body{padding-left:14px;padding-right:14px}header{padding-top:34px}h1{font-size:36px}.track{grid-template-columns:52px 1fr auto}.track img{width:52px;height:52px}.player{width:calc(100% - 20px)}.playerMain{grid-template-columns:48px minmax(0,1fr) auto}.player img{width:48px;height:48px}.playerControls{gap:1px}.player button{width:38px;height:38px}.player .transport{font-size:28px}}