:root{--green:#1db954;--green-bright:#1ed760;--bg:#000;--panel:#121212;--panel-hi:#1a1a1a;--bar:#181818;--line:#282828;--text:#fff;--muted:#a7a7a7;--dim:#6a6a6a}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);flex-direction:column;height:100vh;font-family:Circular,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow:hidden}.shell{flex:1;padding:0 0 140px;overflow-y:auto}.hero{background:linear-gradient(180deg, #1f3d2b 0%, var(--panel) 90%);padding:56px 40px 28px}.brand{letter-spacing:.18em;text-transform:uppercase;color:var(--green);align-items:center;gap:10px;margin-bottom:26px;font-size:13px;font-weight:700;display:flex}.brand svg{width:22px;height:22px;fill:var(--green)}h1{letter-spacing:-.02em;font-size:clamp(28px,5vw,46px);font-weight:800}.sub{color:var(--muted);margin-top:10px;font-size:14px}.loader{flex-wrap:wrap;gap:10px;max-width:720px;margin-top:26px;display:flex}input[type=text]{background:var(--panel-hi);border:1px solid var(--line);min-width:260px;color:var(--text);border-radius:999px;outline:none;flex:1;padding:13px 20px;font-size:14px;transition:border-color .15s}input[type=text]:focus{border-color:var(--green)}input[type=text]::placeholder{color:var(--dim)}button.primary{background:var(--green);color:#000;cursor:pointer;border:0;border-radius:999px;padding:13px 30px;font-size:14px;font-weight:700;transition:transform .12s,background .15s}button.primary:hover:not(:disabled){background:var(--green-bright);transform:scale(1.04)}button.primary:disabled{opacity:.45;cursor:default}.notice{border-radius:8px;margin:18px 40px 0;padding:13px 18px;font-size:13.5px;line-height:1.5;display:none}.notice.error{color:#ff9aa5;background:#e221341f;border:1px solid #e2213466;display:block}.notice.info{color:#8fe0ab;background:#1db9541a;border:1px solid #1db95459;display:block}.listing{padding:26px 40px 0}.listing-head{justify-content:space-between;align-items:baseline;margin-bottom:8px;display:flex}.listing-head h2{font-size:20px;font-weight:700}.quota{color:var(--dim);font-size:12px}.row{cursor:pointer;border-radius:6px;grid-template-columns:34px 1fr 90px;align-items:center;gap:14px;padding:9px 12px;transition:background .12s;display:grid}.row:hover{background:var(--panel-hi)}.row .idx{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;font-size:14px}.row .name{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.row .artist{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:12.5px;overflow:hidden}.row .len{color:var(--dim);text-align:right;font-variant-numeric:tabular-nums;font-size:13px}.row.active .name,.row.active .idx{color:var(--green);font-weight:600}.row.cached .idx:after{content:"·";color:var(--green);margin-left:4px}.dock{background:var(--bar);border-top:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:12px 20px 14px;display:grid;position:fixed;bottom:0;left:0;right:0}.now{align-items:center;gap:12px;min-width:0;display:flex}.now .art{background:var(--panel-hi) center/cover;border-radius:4px;flex-shrink:0;width:52px;height:52px}.now .meta{min-width:0}.now .t{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.now .a{color:var(--muted);text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:11.5px;overflow:hidden}.controls{flex-direction:column;align-items:center;gap:9px;width:min(520px,46vw);display:flex}.buttons{align-items:center;gap:20px;display:flex}.ctl{cursor:pointer;color:var(--muted);background:0 0;border:0;place-items:center;transition:color .12s,transform .12s;display:grid}.ctl svg{fill:currentColor;width:17px;height:17px}.ctl:hover{color:var(--text)}.ctl.on{color:var(--green)}.ctl.play{background:var(--text);color:#000;border-radius:50%;width:38px;height:38px}.ctl.play svg{width:15px;height:15px}.ctl.play:hover{color:#000;transform:scale(1.07)}.scrub{align-items:center;gap:10px;width:100%;display:flex}.scrub .time{color:var(--dim);font-variant-numeric:tabular-nums;min-width:36px;font-size:11px}.track{background:var(--line);cursor:pointer;border-radius:2px;flex:1;height:4px;position:relative}.track .fill{background:var(--muted);border-radius:2px;width:0;height:100%}.track:hover .fill{background:var(--green)}.right{justify-content:flex-end;align-items:center;gap:12px;display:flex}.vol{width:92px;accent-color:var(--green)}#stage{z-index:5;width:246px;height:138px;position:fixed;top:0;left:-9999px}#stage.show{inset:auto 16px 100px auto}#stage iframe{border:0;border-radius:6px;width:100%;height:100%}@media (max-width:760px){.hero{padding:34px 20px 22px}.listing{padding:20px 14px 0}.notice{margin:14px 20px 0}.dock{grid-template-columns:1fr;gap:10px;padding:10px 14px 12px}.right{display:none}.controls{width:100%}}.library{padding:24px 40px 0}.library h3{letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:12px;font-size:12px;font-weight:700}.cards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;display:grid}.card{background:var(--panel-hi);cursor:pointer;border:1px solid #0000;border-radius:7px;align-items:center;gap:12px;padding:9px 11px;transition:background .14s,border-color .14s;display:flex;position:relative;overflow:hidden}.card:hover{background:#232323}.card.current{border-color:var(--green)}.card .cover{background:#000 50%/cover;border-radius:4px;flex-shrink:0;width:46px;height:46px}.card .info{flex:1;min-width:0}.card .cname{text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;overflow:hidden}.card .ccount{color:var(--muted);margin-top:3px;font-size:11.5px}.card .forget{cursor:pointer;color:var(--dim);opacity:0;background:0 0;border:0;font-size:17px;line-height:1;transition:opacity .14s,color .14s;position:absolute;top:5px;right:7px}.card:hover .forget{opacity:1}.card .forget:hover{color:#ff6b78}.head-right{align-items:center;gap:14px;display:flex}.modes{background:var(--panel-hi);border-radius:999px;padding:3px;display:flex}.modes button{cursor:pointer;color:var(--muted);background:0 0;border:0;border-radius:999px;padding:5px 15px;font-size:12px;font-weight:600;transition:background .14s,color .14s}.modes button:hover{color:var(--text)}.modes button.on{background:var(--green);color:#000}@media (max-width:760px){.library{padding:18px 14px 0}.cards{grid-template-columns:1fr 1fr}.listing-head{flex-direction:column;align-items:flex-start;gap:10px}}