:root{--acc:#8B7BFF;--acc2:#6C4DF6;--amber:#FFB020}
.top .btn{background:var(--amber)}
.btn.buy{background:var(--acc2)}
.chip.on,.player .chip.on{background:var(--acc);border-color:var(--acc);color:var(--ink)}
.now{background:#1a1e2b;border:1px solid #2c3246;border-radius:12px;padding:12px;margin:12px 0}
.now-main{display:flex;align-items:center;gap:12px}
.now-txt{min-width:0}
.now-title{font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-sub{font-size:13px;color:#aeb3c2}
.player .btn.small{background:var(--amber);color:var(--ink)}
.player .btn[disabled]{opacity:.45;cursor:default}
.bar{height:6px;background:#2c3246;border-radius:4px;margin:10px 0;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--acc)}
.stingers{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.stingers .lbl{font-size:13px;color:#aeb3c2}
.player .stingers .chip[disabled]{opacity:.45;cursor:default}
.list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.mood-h{grid-column:1/-1;margin:10px 0 0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#aeb3c2}
.loop{position:relative;display:flex;flex-direction:column;text-align:left;background:#1a1e2b;color:#fff;border:1px solid #2c3246;border-radius:12px;padding:10px 12px;font:inherit;cursor:pointer;min-height:84px}
.loop:hover{border-color:var(--acc)}
.loop.playing{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.loop .nm{font-weight:700;font-size:15.5px;padding-right:56px}
.loop .ds{font-size:13px;color:#aeb3c2;margin-top:2px}
.loop .mt{font:12px/1.4 ui-monospace,Menlo,Consolas,monospace;color:#c9c2ff;margin-top:6px}
.loop .dur{position:absolute;top:10px;right:12px;font:12px/1 ui-monospace,Menlo,Consolas,monospace;color:#aeb3c2}
.loop .foot{display:flex;gap:8px;align-items:center;margin-top:6px}
.loop .dl{font-size:12px;color:#fff;background:#2c3246;border-radius:6px;padding:3px 7px;text-decoration:none}
.loop.st{min-height:64px;border-style:dashed}
.btn.complete{margin-top:8px;width:100%;background:var(--amber);color:var(--ink)}
@media (max-width:760px){
  .list{grid-template-columns:1fr}
  .now-title{font-size:15.5px}
}