.xp{background:linear-gradient(180deg,#15151c,#0f0f14);box-shadow:0 40px 90px -40px rgba(139,92,246,.45);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px;width:100%}
.xp-top{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap}
.xp-play{box-shadow:0 0 0 6px rgba(139,92,246,.14);width:52px;height:52px;border-radius:50%;border:0;background:#f4f4f6;color:#09090c;display:grid;place-items:center;cursor:pointer;flex:none}
.xp-play:focus-visible,.xp-m:focus-visible,.xp-s:focus-visible,.xp-reset:focus-visible{outline:2px solid #06B6D4;outline-offset:2px}
.xp-status{flex:1;min-width:160px;font-size:13px;color:#c8c8d3}
.xp-reset{background:none;border:1px solid rgba(255,255,255,.16);color:#f4f4f6;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}
.xp-list{display:grid;grid-template-columns:1fr;row-gap:3px;max-height:560px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.xp-group{grid-column:1/-1;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8d8d9c;margin:10px 0 2px 2px}
.xp-group:first-child{margin-top:0}
.xp-lane{--c:#fff;--c2:#fff;display:grid;grid-template-columns:22px minmax(0,1fr) 72px 24px 24px;align-items:center;gap:10px;min-width:0;padding:4px 8px 4px 6px;border-radius:8px;border:1px solid rgba(255,255,255,.07);background:#0b0b10;color:#f4f4f6;transition:opacity .2s}
.xp-n{font-size:10px;color:#6b6b78;font-variant-numeric:tabular-nums;text-align:right}
.xp-name{font-weight:500;color:var(--c2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-meter{height:6px;border-radius:3px;background:#1a1a23;overflow:hidden}
.xp-meter i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--c),var(--c2));box-shadow:0 0 10px var(--c);transform:scaleX(0);transform-origin:left;transition:transform 60ms linear}
.xp-m,.xp-s{width:24px;height:22px;border-radius:5px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#9a9aa8;font:inherit;font-size:11px;font-weight:600;cursor:pointer;padding:0;line-height:1}
.xp-m:hover,.xp-s:hover{border-color:rgba(255,255,255,.3);color:#f4f4f6}
.xp-m.on{background:#f59e0b;border-color:#f59e0b;color:#09090c}
.xp-s.on{background:#06B6D4;border-color:#06B6D4;color:#09090c}
.xp-rest{grid-column:4/6;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5f5f6c;white-space:nowrap}
.xp-lane.rest{opacity:.45}
.xp-lane.rest .xp-name{color:#9a9aa8}
.xp-lane.off{opacity:.38}
.xp-lane.solo{border-color:rgba(6,182,212,.5)}
@media (max-width:640px){.xp-list{max-height:440px}.xp-group{margin-top:8px}}