/* Maksy Player 2.0 — inline block; uses the DJ Maksy theme colors when present, with fallbacks for other themes */
.mp-player{
  --mp-bg:var(--bg,#120d1a); --mp-panel:var(--panel,#1b1426); --mp-line:var(--line,#2e2440);
  --mp-fg:var(--fg,#efe8f6); --mp-muted:var(--muted,#a397b5); --mp-accent:var(--brass,#e2b45a);
  --mp-ink:var(--brass-ink,#1a1206);
  --mp-display:var(--display,system-ui,sans-serif); --mp-mono:var(--mono,ui-monospace,Menlo,monospace);
  background:var(--mp-panel);border:1px solid var(--mp-line);border-radius:18px;color:var(--mp-fg);
  display:grid;grid-template-columns:minmax(0,1fr);max-width:100%;overflow:hidden
}
.mp-player.mp-empty{padding:20px;gap:10px}
.mp-side{display:grid;gap:18px;padding:22px;align-content:start}
.mp-lib{display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--mp-line)}
.mp-lib>.mp-tracks{flex:1 1 auto;min-height:0}
.mp-albums{align-items:center}
@media (min-width:900px){
  .mp-player:not(.mp-empty){grid-template-columns:minmax(300px,0.9fr) minmax(0,1.3fr)}
  .mp-lib{border-top:0;border-left:1px solid var(--mp-line)}
  .mp-tracks{max-height:420px}
}

/* now playing */
.mp-head{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center}
.mp-art{width:112px;aspect-ratio:1;max-width:100%;border-radius:50%;background:repeating-radial-gradient(circle,#0b0810 0 2px,#221a2e 2px 3px);border:2px solid var(--mp-line);position:relative;background-size:cover;background-position:center;box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.mp-art::after{content:"";position:absolute;inset:38%;border-radius:50%;background:var(--mp-accent)}
.mp-art.has-cover{border-radius:12px;border-color:transparent}
.mp-art.has-cover::after{display:none}
.mp-art.spin:not(.has-cover){animation:mp-spin 1.8s linear infinite}
@keyframes mp-spin{to{transform:rotate(360deg)}}
.mp-meta{min-width:0;display:grid;gap:3px}
.mp-label{font-family:var(--mp-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-accent)}
.mp-title{font-family:var(--mp-display);font-weight:700;font-size:19px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mp-artist{font-size:14px;color:var(--mp-fg);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-album{font-family:var(--mp-mono);font-size:12px;color:var(--mp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sliders */
.mp-bar{display:grid;grid-template-columns:3.2em minmax(0,1fr) 3.2em;align-items:center;gap:10px;font-family:var(--mp-mono);font-size:12px;color:var(--mp-muted);font-variant-numeric:tabular-nums}
.mp-bar span:last-child{text-align:right}
.mp-player input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;--p:0%}
.mp-player input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--mp-accent) var(--p),var(--mp-line) var(--p))}
.mp-player input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:var(--mp-line)}
.mp-player input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--mp-accent)}
.mp-player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--mp-accent);margin-top:-5px;border:0}
.mp-player input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--mp-accent);border:0}
.mp-player input[type=range]:focus-visible{outline:2px solid var(--mp-accent);outline-offset:2px;border-radius:4px}

/* controls */
.mp-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mp-ctl{display:flex;gap:10px;align-items:center}
.mp-ic{width:42px;height:42px;border-radius:50%;border:1px solid var(--mp-line);background:transparent;color:var(--mp-fg);cursor:pointer;display:grid;place-items:center;padding:0;flex:none}
.mp-ic svg{width:16px;height:16px;fill:currentColor}
.mp-ic.mp-play{width:56px;height:56px;background:var(--mp-accent);border-color:var(--mp-accent);color:var(--mp-ink)}
.mp-ic.mp-play svg{width:18px;height:18px}
.mp-ic:hover{border-color:var(--mp-accent)}
.mp-ic:focus-visible{outline:2px solid var(--mp-accent);outline-offset:2px}
.mp-vol{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;max-width:220px;margin-left:auto}
.mp-mute{width:36px;height:36px;border:0}
.mp-mute svg{width:18px;height:18px}

/* albums */
.mp-albums{display:flex;gap:10px;overflow-x:auto;padding:16px 18px 14px;scroll-snap-type:x proximity;scrollbar-width:thin;border-bottom:1px solid var(--mp-line)}
.mp-chip{all:unset;box-sizing:border-box;cursor:pointer;flex:none;scroll-snap-align:start;display:grid;grid-template-columns:44px auto;gap:10px;align-items:center;padding:6px 14px 6px 6px;border:1px solid var(--mp-line);border-radius:12px;max-width:220px;transition:border-color .15s,background .15s}
.mp-chip img,.mp-chip-ph{width:44px;height:44px;border-radius:8px;object-fit:cover;display:block;background:var(--mp-line)}
.mp-chip span{display:grid;min-width:0}
.mp-chip b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-chip small{font-family:var(--mp-mono);font-size:11px;color:var(--mp-muted)}
.mp-chip:hover{border-color:var(--mp-accent)}
.mp-chip.on{background:var(--mp-line);border-color:var(--mp-accent)}
.mp-chip.playing b::after{content:" ♪";color:var(--mp-accent)}
.mp-chip:focus-visible{outline:2px solid var(--mp-accent);outline-offset:2px}

/* tracklist */
.mp-tracks{list-style:none;padding:8px 10px 12px;margin:0;overflow:auto;max-height:360px;scrollbar-width:thin}
.mp-tracks button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:2.2em minmax(0,1fr) 3.4em;gap:10px;align-items:center;width:100%;padding:9px 10px;border-radius:10px}
.mp-tracks button:hover{background:var(--mp-line)}
.mp-tracks button:focus-visible{outline:2px solid var(--mp-accent)}
.mp-tracks li.on button{background:color-mix(in srgb,var(--mp-accent) 14%,transparent);color:var(--mp-accent)}
.mp-n{font-family:var(--mp-mono);font-size:12px;color:var(--mp-muted);text-align:right;font-variant-numeric:tabular-nums}
.mp-tracks li.on .mp-n{color:var(--mp-accent)}
.mp-t{min-width:0;display:grid}
.mp-t b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-t small{font-size:12px;color:var(--mp-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-d{font-family:var(--mp-mono);font-size:12px;color:var(--mp-muted);font-variant-numeric:tabular-nums;text-align:right}

.mp-note{margin:0;font-size:13px;color:var(--mp-muted)}
.mp-admin-hint{margin:0;font-size:13px;border:1.5px dashed var(--mp-line);border-radius:10px;padding:12px;color:var(--mp-muted)}

@media (max-width:480px){
  .mp-side{padding:18px}
  .mp-head{grid-template-columns:84px minmax(0,1fr);gap:14px}
  .mp-art{width:84px}
  .mp-vol{max-width:none;min-width:0;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.mp-art.spin{animation:none}.mp-chip{transition:none}}

/* visual equalizer */
.mp-viz{display:block;width:100%;height:64px;max-width:100%}
.mp-player.is-playing .mp-tracks li.on .mp-n{color:transparent;justify-self:end;display:block;width:14px;height:14px;
  background:linear-gradient(var(--mp-accent),var(--mp-accent)) 0 100%/3px 40% no-repeat,
             linear-gradient(var(--mp-accent),var(--mp-accent)) 50% 100%/3px 90% no-repeat,
             linear-gradient(var(--mp-accent),var(--mp-accent)) 100% 100%/3px 60% no-repeat;
  animation:mp-eqi .8s ease-in-out infinite alternate}
@keyframes mp-eqi{
  0%{background-size:3px 40%,3px 90%,3px 60%}
  33%{background-size:3px 90%,3px 35%,3px 80%}
  66%{background-size:3px 55%,3px 70%,3px 30%}
  100%{background-size:3px 80%,3px 50%,3px 95%}}
@media (prefers-reduced-motion:reduce){.mp-player.is-playing .mp-tracks li.on .mp-n{animation:none}}

/* dances mode */
.mp-tabs{display:flex;gap:4px;padding:14px 18px 0}
.mp-tabs button{all:unset;cursor:pointer;font-family:var(--mp-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;color:var(--mp-muted);border:1px solid transparent}
.mp-tabs button.on{color:var(--mp-ink);background:var(--mp-accent)}
.mp-tabs button:not(.on):hover{border-color:var(--mp-line);color:var(--mp-fg)}
.mp-tabs button:focus-visible{outline:2px solid var(--mp-accent);outline-offset:2px}
.mp-tabs[hidden]+.mp-dances+.mp-albums,.mp-tabs[hidden]~.mp-albums{padding-top:16px}
.mp-dances{flex-wrap:wrap;overflow:visible;align-items:center}
.mp-dchip{grid-template-columns:auto;padding:8px 14px}
.mp-group{font-family:var(--mp-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mp-accent);flex-basis:100%;margin-top:4px}
.mp-group:first-child{margin-top:0}
.mp-bpm{display:inline-block;font-family:var(--mp-mono);font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;border:1px solid var(--mp-line);color:var(--mp-muted);margin-right:8px;vertical-align:1px}
.mp-tracks button{grid-template-columns:2.2em minmax(0,1fr) auto}

/* download button */
.mp-tracks li{display:flex;align-items:center;gap:4px}
.mp-tracks li>button{flex:1 1 auto;min-width:0}
.mp-dl{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--mp-muted);border:1px solid transparent;text-decoration:none}
.mp-dl svg{width:16px;height:16px}
.mp-dl:hover{color:var(--mp-accent);border-color:var(--mp-line)}
.mp-dl:focus-visible{outline:2px solid var(--mp-accent);outline-offset:1px}
.mp-player{-webkit-user-select:none;user-select:none}

/* download with a code */
.mp-player{position:relative}
.mp-dlc{background:none;cursor:pointer;padding:0}
.mp-codebox{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--mp-bg) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:inherit;-webkit-user-select:text;user-select:text}
.mp-codebox[hidden]{display:none}
.mp-codeform{width:min(100%,380px);background:var(--mp-panel);border:1px solid var(--mp-accent);border-radius:16px;padding:20px;display:grid;gap:10px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.mp-codeform b{font-family:var(--mp-display);font-size:18px}
.mp-codetrack{color:var(--mp-muted);font-size:13px;margin-top:-6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-codelbl{display:grid;gap:6px;font-size:13px;color:var(--mp-muted)}
.mp-codelbl input{font:600 18px var(--mp-mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;border-radius:10px;border:1px solid var(--mp-line);background:var(--mp-bg);color:var(--mp-fg);width:100%;box-sizing:border-box}
.mp-codelbl input:focus{outline:2px solid var(--mp-accent);outline-offset:1px}
.mp-codemsg{font-size:13px;min-height:1.2em}
.mp-codemsg.err{color:var(--rose,#e083a6)}
.mp-codemsg.ok{color:var(--live,#3ddc84)}
.mp-codebtns{display:flex;gap:8px;flex-wrap:wrap}
.mp-codebtns button{font:700 13px var(--body,system-ui);letter-spacing:.06em;text-transform:uppercase;padding:11px 18px;border-radius:999px;cursor:pointer;border:1px solid var(--mp-accent)}
.mp-codego{background:var(--mp-accent);color:var(--mp-ink)}
.mp-codego:disabled{opacity:.6;cursor:wait}
.mp-codecancel{background:transparent;color:var(--mp-fg);border-color:var(--mp-line)!important}