/* SPM base styles (moved from base.html in v4.30.1 for CSP style-src-elem 'self') */
:root{
 --bg:#0b0b0b; --panel:#151515; --panel2:#1c1c1c; --text:#f5f5f5; --muted:#a7a7a7;
 --spotify:#1DB954; --spotify2:#1ed760; --line:#2b2b2b; --danger:#e65b5b; --warn:#e2aa46;
 font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark
}
*{box-sizing:border-box} body{margin:0;background:linear-gradient(180deg,#0a0a0a,#111);color:var(--text)}
a{color:inherit;text-decoration:none}.shell{max-width:980px;margin:auto;padding:18px 16px 70px}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:21px}.version-badge{font-size:11px;font-weight:800;color:#bdbdbd;background:#202020;border:1px solid #333;padding:4px 7px;border-radius:999px;white-space:nowrap}.logo{width:38px;height:38px;border-radius:12px;background:transparent;display:grid;place-items:center;overflow:hidden}.logo img{width:100%;height:100%;display:block;object-fit:cover}
.user{color:var(--muted);font-size:13px}.userbox{display:flex;align-items:center;gap:9px}.avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #333;background:#1d1d1d}.avatar-fallback{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#242424;border:1px solid #333;font-weight:800;color:#bbb}.metric-label{display:inline-flex;align-items:center;gap:6px}.metric-info{position:relative;display:inline-flex}.metric-pop{display:none;position:absolute;z-index:40;left:25px;top:-8px;width:min(360px,75vw);background:#242424;border:1px solid #3d3d3d;border-radius:12px;padding:11px;box-shadow:0 10px 32px rgba(0,0,0,.45);font-size:12px;line-height:1.45;color:#ddd}.metric-pop.open{display:block}.card{background:rgba(21,21,21,.96);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.hero{background:linear-gradient(135deg,#123c22,#161616 58%)} h1{font-size:28px;margin:0 0 8px} h2{font-size:20px;margin:0 0 12px}.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.menu{display:block;background:var(--panel2);border:1px solid #303030;border-radius:15px;padding:18px;min-height:105px}.menu:hover{border-color:var(--spotify)}.menu b{display:block;font-size:18px;margin-bottom:7px}.menu span{color:var(--muted);font-size:14px}
.btn,button{border:0;border-radius:999px;background:var(--spotify);color:#07110a;font-weight:800;font-size:16px;padding:13px 19px;cursor:pointer}.secondary{background:#2b2b2b;color:#fff}.danger{background:var(--danger);color:#fff}.warn{background:var(--warn);color:#15100a}.apply{background:linear-gradient(90deg,var(--spotify),var(--spotify2));color:#06110a;box-shadow:0 0 0 1px rgba(30,215,96,.18) inset}.cancel-job{display:none;margin-top:10px;background:#3a3a3a;color:#fff;border:1px solid #555}button:disabled{opacity:.45;cursor:not-allowed}.err{background:#3a1717;border:1px solid #6a2c2c;color:#ffb0b0;border-radius:12px;padding:11px 13px}
select,input{width:100%;background:#111;border:1px solid #3a3a3a;color:#fff;border-radius:12px;padding:13px;font-size:16px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.progress-wrap{margin-top:18px;display:none}.progress{height:24px;background:#292929;border-radius:99px;overflow:hidden;position:relative}.progress>div#progressBar{position:absolute;inset:0 auto 0 0;height:100%;width:0;background:linear-gradient(90deg,var(--spotify),var(--spotify2));transition:width .3s}.progress-percent{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}.progress-meta{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-top:10px}.stage{font-weight:700;margin-top:0}.progress-elapsed{font-size:13px;color:var(--muted);white-space:nowrap}.small{font-size:13px;color:var(--muted)}
table{width:100%;border-collapse:collapse}td,th{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.good{color:var(--spotify2)}.bad{color:#ff7474}
.nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.nav a{padding:8px 11px;border-radius:999px;background:#181818;color:#bbb;font-size:13px}.nav a.active{background:#143920;color:var(--spotify2)}
.placement{border-left:3px solid var(--spotify);padding:10px 12px;margin:10px 0;background:#111;border-radius:0 12px 12px 0}.menu.disabled{opacity:.45;pointer-events:none}.footer{margin-top:28px;padding-top:16px;border-top:1px solid #222;color:#737373;font-size:12px;text-align:center}.score-chart{margin-top:18px;background:#101010;border:1px solid #282828;border-radius:14px;padding:14px;overflow:visible}.score-chart svg{display:block;width:100%;height:auto}.score-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 8px}.score-toggle{display:inline-flex;align-items:center;gap:7px;background:#191919;border:1px solid #303030;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700;cursor:pointer;user-select:none}.score-toggle input{accent-color:var(--spotify);margin:0}.score-info{position:relative;display:inline-flex;align-items:center}.info-btn{width:20px;height:20px;border-radius:50%;border:1px solid #555;background:#202020;color:#d7d7d7;padding:0;font-size:12px;line-height:18px;display:grid;place-items:center;cursor:pointer}.info-pop{display:none;position:absolute;z-index:30;top:27px;right:0;width:min(390px,82vw);background:#242424;border:1px solid #3d3d3d;border-radius:12px;padding:12px;box-shadow:0 10px 32px rgba(0,0,0,.45);font-size:12px;line-height:1.45;color:#ddd}.info-pop.open{display:block}.score-plot{position:relative}.score-tooltip{display:none;position:absolute;z-index:25;min-width:220px;max-width:300px;background:#242424;border:1px solid #444;border-radius:12px;padding:10px 12px;box-shadow:0 10px 28px rgba(0,0,0,.48);pointer-events:none;font-size:12px}.score-tooltip.open{display:block}.score-tooltip b{font-size:13px}.score-history-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:10px}.score-history-item{background:#161616;border:1px solid #292929;border-radius:10px;padding:9px}.msg{padding:12px;border-radius:12px;background:#10371f;color:#c8fbd7}.err{padding:12px;border-radius:12px;background:#431a1a;color:#ffd0d0}.selected-playlist{margin-top:12px;background:linear-gradient(135deg,#123c22,#171717 70%);border:1px solid #24643a;border-radius:14px;padding:13px 15px}.selected-playlist .label{font-size:12px;color:#8fd8a7;text-transform:uppercase;letter-spacing:.05em;font-weight:800}.selected-playlist .name{font-size:18px;font-weight:800;margin-top:4px}.progress-wrap{scroll-margin-top:0}
.dist-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.dist-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:#141414}.dist-list{display:grid;gap:8px;margin-top:10px}.dist-row{display:grid;grid-template-columns:minmax(110px,1.2fr) 2fr 56px;gap:8px;align-items:center}.dist-name{font-size:13px;overflow-wrap:anywhere}.dist-track{height:9px;background:#292929;border-radius:99px;overflow:hidden}.dist-track i{display:block;height:100%;background:var(--spotify);border-radius:99px}.dist-val{text-align:right;font-size:12px;color:var(--muted)}
@media(max-width:620px){.dist-grid{grid-template-columns:1fr}.dist-row{grid-template-columns:100px 1fr 48px}.grid{grid-template-columns:1fr}.row{flex-direction:column;align-items:stretch}.shell{padding-top:12px}h1{font-size:25px}}

.spm-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px;z-index:99999;backdrop-filter:blur(3px)}
.spm-modal-backdrop.open{display:flex}
.spm-modal{width:min(520px,100%);background:#151515;border:1px solid #353535;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.55);padding:22px}
.spm-modal h3{margin:0 0 10px;font-size:21px}
.spm-modal p{margin:0;color:#c9c9c9;line-height:1.5;white-space:pre-wrap}
.spm-modal input{width:100%;box-sizing:border-box;margin-top:16px;background:#0f0f0f;color:#fff;border:1px solid #3b3b3b;border-radius:10px;padding:12px 13px;font:inherit;outline:none}
.spm-modal input:focus{border-color:#1DB954;box-shadow:0 0 0 2px rgba(29,185,84,.18)}
.spm-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.spm-modal-actions button{min-width:100px}
body.spm-modal-open{overflow:hidden}
.weight-wrap{display:grid;grid-template-columns:1fr 64px;gap:10px;align-items:center}.weight-range{min-width:0}.weight-range input[type=range]{display:block;width:100%;margin:0;padding:0}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:#777;line-height:1;margin-top:2px}.weight-number{width:64px!important;padding:8px 6px!important;text-align:center;font-weight:800}.modified-flag{display:inline-flex;align-items:center;gap:6px;color:#e2aa46;font-size:12px;font-weight:800}
@media(max-width:640px){.shell{padding-left:12px;padding-right:12px}.top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}.brand{display:grid;grid-template-columns:38px minmax(0,1fr) auto;column-gap:9px;row-gap:0;font-size:19px;line-height:1.08;min-width:0}.brand .logo{grid-row:1/3}.brand .brand-title{display:block;min-width:0}.brand .version-badge{align-self:start}.userbox{align-self:start;gap:6px}.userbox .user{max-width:92px;line-height:1.15}.avatar,.avatar-fallback{width:32px;height:32px}.nav{gap:6px}.nav a{font-size:12px;padding:7px 10px}}

/* v4.31.1 language picker */
.language-picker{display:flex;align-items:center;gap:7px;margin-left:auto}
.language-picker .language-label{font-size:12px;color:var(--muted);font-weight:700}
.language-picker select{width:auto;min-width:66px;padding:7px 28px 7px 9px;border-radius:10px;font-size:12px;font-weight:700}
.userbox{margin-left:10px}
@media(max-width:720px){.top{flex-wrap:wrap}.language-picker{order:2;margin-left:auto}.userbox{order:3;margin-left:0}.language-picker .language-label{display:none}}