:root { color-scheme: dark; }
html body.modern-player { margin:0; background:#0d1017 !important; background-image:radial-gradient(ellipse at 50% 0%,#192332 0%,transparent 60%) !important; color:#eef2f7; font-family:Inter,'Segoe UI',system-ui,sans-serif; }
html body.modern-player #app { --skin-text:#eef2f7; --skin-muted:#a3adbd; --skin-h2:#eef2f7; --skin-ly-bg:#141a24; --skin-inp-bg:#121923; --skin-sel-bg:#121923; --skin-card-br:#293342; --skin-accent:#69ddbd; --skin-accent-rgb:105,221,189; max-width:920px; margin:0 auto; padding:28px 24px; }
.modern-player .top { display:flex; justify-content:space-between; gap:16px; border:0; background:transparent; padding:0 0 22px; }
.modern-player .top h1 { font-size:22px; letter-spacing:.13em; }
.modern-player .sub { color:#9ba7b8; font-size:13px; }
.modern-player .spin-logo { animation:none !important; border-radius:10px; }
html body.modern-player #app .btn, html body.modern-player #app .tab, html body.modern-player #app label.btn-file { background:#202938 !important; background-image:none !important; border:1px solid #354154 !important; border-radius:12px !important; box-shadow:none !important; text-shadow:none !important; filter:none !important; color:#f3f6fa !important; padding:11px 17px !important; font-size:14px; font-weight:600; min-height:44px; transition:background .18s,transform .18s; overflow:visible; }
html body.modern-player #app .btn:hover,html body.modern-player #app .tab:hover { background:#2b384b !important; transform:translateY(-1px); }
html body.modern-player #app .primary { background:#72e0c1 !important; color:#071b16 !important; border-color:#72e0c1 !important; }
html body.modern-player #app .camo-label-text { background:none !important; border:0 !important; padding:0 !important; box-shadow:none !important; color:inherit !important; text-shadow:none !important; white-space:normal !important; font-size:inherit; }
.modern-navigation { display:flex; justify-content:flex-start; gap:10px; }
html body.modern-player #app .modern-navigation > * { flex:0 1 auto !important; min-width:110px; }
.now-playing-heading { display:flex; gap:24px; align-items:center; margin:24px 0 18px; }
.album-art { position:relative; flex:0 0 140px; width:140px; height:140px; border-radius:22px; background:linear-gradient(135deg,#273c51,#17232e); display:grid; place-items:center; overflow:hidden; box-shadow:0 12px 40px #0003; }
.album-art > span { font-size:58px; color:#82e4c7; }
.album-art img { position:absolute; width:100%; height:100%; object-fit:cover; }
.album-art img[hidden] { display:none; }
.track-details { min-width:0; }
.track-details .eyebrow { font-size:11px; letter-spacing:.2em; color:#6eddbc; margin:0 0 8px; }
#now-track-title { font-size:clamp(24px,4vw,36px); line-height:1.2; margin:0 0 10px; color:#f6f8fa; overflow-wrap:anywhere; }
#now-track-artist { color:#b8c3d1; font-size:17px; margin:0; }
#now-track-album { color:#7f90a6; font-size:13px; margin:6px 0 0; }
html body.modern-player #app .card { background:#151c27 !important; border:1px solid #283345 !important; box-shadow:none; border-radius:18px; padding:20px; }
html body.modern-player #app #live-play-controls { background:transparent !important; border:0 !important; padding:0; }
.modern-player .transport { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:18px 0 24px; }
html body.modern-player #app .transport .btn { flex:0 0 auto; min-width:48px; }
html body.modern-player #app #btn-play { width:72px; height:72px; border-radius:50% !important; font-size:26px; }
.modern-player #btn-pause { display:none !important; }
.modern-player #btn-stop { opacity:.7; }
html body.modern-player #app #btn-repeat { font-size:12px; background:transparent !important; min-width:100px; }
html body.modern-player #app #now-lyrics-panel { min-height:260px; margin:0 0 20px; }
.modern-player #now-lyrics-panel h3 { font-size:13px; color:#9daabd; letter-spacing:.07em; }
.modern-player .ly-embed-hint { display:none; }
.modern-player .ly-display.ly-embed { --lyrics-view-height:220px; height:220px; max-height:220px; background:transparent; border:0; padding:12px; }
.modern-player .ly-line { font-size:18px; line-height:1.65; color:#8491a3; }
.modern-player .ly-line.ly-cur { font-size:22px; color:#f7fffd; background:transparent; font-weight:700; }
.modern-player .ly-display:not(:has(.ly-line)) { display:none; }
.lyrics-empty { color:#8795a9; text-align:center; padding:58px 18px; font-size:16px; }
.modern-player .progress-row { display:flex; gap:12px; align-items:center; padding:0 8px; }
.modern-player .time { font-size:12px; color:#9aa9bc; }
.modern-player .vol-row { display:flex; align-items:center; gap:16px; max-width:380px; margin:20px auto; }
.modern-player input[type=range] { accent-color:#70ddbd; }
.modern-player label { color:#bbc7d6; }
.modern-player footer { border:0; color:#8391a4; font-size:12px; padding-top:16px; }
html body.modern-player #feature-popup { background:#141c28; border-color:#354155; border-radius:20px; padding:24px; box-shadow:0 30px 90px #0008; }
.modern-player .popup-heading { background:#141c28; padding:8px 0 16px; }
.modern-player .tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px 0; }
.modern-player #music-panel label.btn-file { display:flex; margin:16px 0; justify-content:center; }
.modern-player #feature-popup[data-popup-panel="queue-panel"] { margin:0 0 0 auto; height:100dvh; max-height:100dvh; width:min(460px,100vw); border-radius:18px 0 0 18px; }
.modern-player #settings-panel .camo-theme-field { justify-content:flex-start; padding:16px 0; }
.modern-player .camo-theme-field label { color:#a8b7c9; }
.modern-player #app.camo-accent .album-art { background-image:linear-gradient(#10201a55,#10201a88),var(--modern-camo-url); background-size:cover; }
@media(max-width:600px) { html body.modern-player #app { padding:20px 16px 30px; } .now-playing-heading { gap:16px; } .album-art { flex-basis:96px; width:96px; height:96px; border-radius:18px; } .modern-navigation { gap:8px; } html body.modern-player #app .modern-navigation > * { flex:1 1 40% !important; min-width:0; } .modern-player .transport { gap:8px; } .modern-player #now-lyrics-panel { min-height:250px; } .modern-player .top h1 { font-size:18px; } .modern-player .top .btn { padding:9px !important; } }
@media(prefers-reduced-motion:reduce) { .modern-player * { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
@media(max-width:600px) {
 html body.modern-player #app { padding-bottom:160px; }
 .modern-player .transport { position:fixed; bottom:max(10px,env(safe-area-inset-bottom)); left:12px; right:12px; z-index:10; background:rgba(20,29,41,.96); backdrop-filter:blur(14px); border:1px solid #354155; border-radius:20px; padding:10px; margin:0; box-shadow:0 10px 40px #0008; }
 html body.modern-player #app #btn-play { width:60px; height:60px; }
 html body.modern-player #app .transport .btn { min-width:42px; padding:9px 12px !important; }
 html body.modern-player #app #btn-repeat { flex-basis:100%; height:30px; min-height:30px; padding:3px !important; }
}
/* Compact five-line lyrics viewport, with consistent row sizing. */
html body.modern-player #app #now-lyrics-panel { min-height:0; padding:14px 16px; }
.modern-player .ly-display.ly-embed { --lyrics-view-height:164px; height:164px; max-height:164px; padding:12px; }
.modern-player .ly-line, .modern-player .ly-line.ly-cur { height:28px; line-height:28px; font-size:16px; margin:0; padding:0 !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.modern-player .lyrics-empty { padding:30px 12px; }
.modern-player footer.foot { display:none !important; }
/* Camo is selected in Settings and applies to every assigned control. */
html body.modern-player #app.camo-accent [data-camo-stack],
html body.modern-player #app.camo-accent .btn[data-camo-stack],
html body.modern-player #app.camo-accent .tab[data-camo-stack],
html body.modern-player #app.camo-accent label.btn-file[data-camo-stack] {
 background-image:linear-gradient(#ffffff18,#00000066),var(--button-camo) !important; background-size:cover !important; background-position:center !important; color:#fff !important;
}
html body.modern-player #app.camo-accent .camo-label-text { background:rgba(0,0,0,.72) !important; color:#fff !important; border-radius:5px; padding:2px 5px !important; }
@media(max-width:600px) {
 .modern-player .top { flex-direction:row !important; align-items:center !important; flex-wrap:nowrap !important; gap:8px; }
 .modern-player .brand { flex:1; min-width:0; gap:8px; }
 .modern-player .top h1 { font-size:17px; }
 .modern-player .sub { font-size:11px; }
 html body.modern-player #app .top > .btn { flex:0 0 auto; width:auto !important; min-width:0; font-size:12px; padding:8px 10px !important; }
 .modern-player .modern-navigation { flex-wrap:nowrap; gap:5px; }
 html body.modern-player #app .modern-navigation > * { flex:1 1 0 !important; width:auto; min-width:0; font-size:12px; padding:8px 6px !important; white-space:nowrap; }
 .modern-player .transport { flex-wrap:nowrap; gap:5px; padding:8px; }
 html body.modern-player #app .transport .btn { min-width:34px; padding:7px !important; font-size:13px; min-height:38px; }
 html body.modern-player #app #btn-play { width:46px; height:46px; min-width:46px; font-size:20px; }
 html body.modern-player #app #btn-repeat { flex-basis:auto; width:auto; min-width:76px; height:38px; min-height:38px; font-size:11px; }
 html body.modern-player #app { padding-bottom:100px; }
}
.modern-player .about-samsel { color:#9eacbe; padding:20px 4px; font-size:13px; }
.modern-player .about-samsel h2 { font-size:15px; margin:0 0 8px; }
.modern-player .about-samsel a { color:#77e2c4; }
@keyframes samsel-logo-spin { to { transform:rotate(360deg); } }
html body.modern-player .spin-logo { animation:samsel-logo-spin 8s linear infinite !important; }
/* Only the main player transport floats; loop controls belong to their panel. */
html body.modern-player #feature-popup .transport { position:static !important; left:auto; right:auto; bottom:auto; margin:16px 0; box-shadow:none; }
@media(min-width:701px) {
 .modern-player #hotcue-grid { display:grid !important; grid-template-columns:repeat(8,minmax(0,1fr)); gap:8px; }
 .modern-player #hotcue-grid .hotcue-row { display:contents !important; }
 .modern-player #hotcue-grid button[data-cue-action="set"] { grid-row:1; grid-column:var(--cue-column); }
 .modern-player #hotcue-grid button[data-cue-action="go"] { grid-row:2; grid-column:var(--cue-column); }
 html body.modern-player #hotcue-grid .btn { min-width:0; padding:9px 5px !important; white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) { html body.modern-player .spin-logo { animation:none !important; } }

/* Transition settings keep each caption with its control on desktop and phone. */
#crossfade-panel > .row-inline { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }
#crossfade-panel .transition-field { display:flex; flex-direction:column; gap:7px; min-width:0; }
#crossfade-panel input[type=number], #crossfade-panel select { width:100%; max-width:none; box-sizing:border-box; min-height:40px; background:#101820; color:#fff; border:1px solid #465366; border-radius:8px; padding:8px; }
#crossfade-panel select option { background:#101820; color:#fff; }
#crossfade-panel #xf-status, #crossfade-panel .hint { grid-column:1/-1; margin:4px 0; }
#crossfade-panel > .transition-field { margin-bottom:16px; }
#xf-crossfader { width:100%; }
#feature-popup #crossfade-panel > h3 { display:none; }
@media(max-width:420px) { #crossfade-panel > .row-inline { grid-template-columns:1fr; } }

.effects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:16px 0; }
.effect-control { display:flex; flex-direction:column; gap:10px; border:1px solid #344153; border-radius:12px; padding:14px; min-width:0; }
.effect-control input[type=range], .effect-control select { width:100%; }
.effect-control select { color:#fff; background:#101820; min-height:40px; border-radius:8px; }
.effect-control output { margin-left:8px; color:var(--accent,#74d8bf); }
@media(max-width:480px){ .effects-grid {grid-template-columns:1fr;} }

/* DJ Engine deck rack and four-slot jingle controls. */
.professional-rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.rack-column{padding:14px;border:1px solid #334155;border-radius:16px;background:linear-gradient(#202b3d,#101721)}.rack-column h3{font-size:13px;letter-spacing:.06em;color:#b7c5dd}.rack-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rack-buttons .btn,.ai-rack-buttons .btn{min-width:0;padding:7px 5px;font-size:12px;min-height:36px}.ai-rack-buttons{display:flex;gap:6px}.fx-toggle-on{outline:2px solid #70dfbf!important;box-shadow:0 0 12px #70dfbf44!important}.jingle-slots{margin-top:22px;display:grid;gap:12px}.jingle-slots select{width:100%;background:#151e2c;color:white;padding:10px;border:1px solid #40516a;border-radius:10px}.jingle-slot{display:grid;grid-template-columns:44px 80px 65px 65px minmax(0,1fr);align-items:center;gap:8px}.jingle-slot .btn{padding:7px;font-size:12px;min-height:36px}.jingle-slot .hint{overflow-wrap:anywhere}.jingle-folder{display:flex;align-items:center;gap:12px}.jingle-slots .btn-file input{display:none!important}@media(max-width:700px){.professional-rack{grid-template-columns:1fr}.jingle-slot{grid-template-columns:40px repeat(3,minmax(0,1fr))}.jingle-slot .hint{grid-column:2/-1}.ai-rack-buttons .btn{flex:1}.jingle-folder{flex-wrap:wrap}}

html body.modern-player #feature-popup[data-popup-panel="effects-panel"]{width:min(1100px,95vw)}
html body.modern-player #feature-popup .rack-buttons .btn,html body.modern-player #feature-popup .ai-rack-buttons .btn{padding:7px 5px!important;font-size:12px!important;min-width:0!important;min-height:36px!important;white-space:nowrap!important}
html body.modern-player #feature-popup .ai-rack-buttons .btn{flex:1 1 0}
html body.modern-player #feature-popup .rack-buttons .camo-label-text,html body.modern-player #feature-popup .ai-rack-buttons .camo-label-text{white-space:nowrap!important;font-size:12px!important;overflow:visible!important;text-overflow:clip!important}

html body.modern-player #feature-popup .jingle-slot .btn,html body.modern-player #feature-popup .jingle-slot .btn-file{padding:7px 4px!important;font-size:12px!important;min-width:0!important;white-space:nowrap!important}
html body.modern-player #feature-popup .jingle-slot .camo-label-text{font-size:12px!important;white-space:nowrap!important;text-overflow:clip!important;max-width:100%!important;padding:2px 3px!important}
@media(max-width:700px){html body.modern-player #feature-popup[data-popup-panel="effects-panel"]{width:calc(100vw - 32px);box-sizing:border-box;padding:16px;overflow-x:hidden}html body.modern-player #feature-popup .ai-rack-buttons .camo-label-text{font-size:10px!important;padding:2px 2px!important;max-width:100%!important}.rack-column{min-width:0;padding:12px}.jingle-slot>span:first-child{white-space:nowrap;font-size:12px}.jingle-slot{gap:6px}}

#xf-mode-label{color:#78e4c9;font-weight:700}.transition-diagnostics{border:1px solid #334155;border-radius:12px;padding:12px;margin:12px 0}.transition-diagnostics summary{cursor:pointer}.transition-diagnostics pre{white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 system-ui;color:#c4d3e7}

.professional-rack.unified-rack{grid-template-columns:1fr}.unified-rack .rack-buttons{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.unified-rack .ai-rack-buttons{max-width:520px}@media(max-width:480px){.unified-rack .rack-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}

#crossfade-panel [hidden]{display:none!important}
#crossfade-panel details{margin:12px 0;border:1px solid #334155;border-radius:12px;padding:14px}
#crossfade-panel summary{cursor:pointer;font-weight:600}
#crossfade-panel details[open]>summary{margin-bottom:14px}
#crossfade-panel .timing-inactive{opacity:1}
#xf-summary{margin:8px 0 16px}