/* OFC-JUKEBOX-042 · visual independente, placeholders de arte sem imagens externas. */
#jukebox-page{--jb-bg:#111018;--jb-card:#1a1724;--jb-line:#4e3d61;--jb-ink:#f7f0ff;--jb-muted:#b6a9c6;--jb-lime:#d8fe80;--jb-purple:#ad77ef;color:var(--jb-ink)}
.jb-home-card{background:#16111f;min-height:280px}
.jb-card-art{min-height:230px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(ellipse at 58% 20%,#582c83 0,transparent 56%),linear-gradient(145deg,#271536 0%,#0b0b13 85%);padding:30px 18px 22px;border-bottom:1px solid #4f3863}
.jb-card-art:before{content:"";position:absolute;inset:14px;border:1px solid #75518e5e;pointer-events:none}
.jb-card-vinyl{position:absolute;top:-36px;right:-30px;width:220px;height:220px;border-radius:50%;background:repeating-radial-gradient(circle at center,#16131e 0 3px,#282134 4px 5px,#0e0d16 6px 9px);border:9px solid #1c1822;box-shadow:0 0 60px #9c4ce166}
.jb-card-vinyl:before{content:"";position:absolute;inset:74px;border-radius:50%;background:#e4ff9c;border:13px solid #b878f4}
.jb-card-name{position:relative;z-index:2;width:100%;display:grid;line-height:.97;letter-spacing:.15em;text-shadow:0 5px 25px #080510}
.jb-card-name b{font-size:clamp(13px,2vw,19px);letter-spacing:.3em;color:#ead1ff}
.jb-card-name strong{font-size:clamp(32px,4.2vw,51px);color:#e5ff9b;font-weight:950}
.jb-card-name small{font-size:10px;letter-spacing:.18em;margin-top:8px;color:#d5bcdf}
.jb-root{max-width:1400px;margin:auto}
.jb-hero{background:radial-gradient(ellipse at 70% -20%,#42305499,transparent 60%),linear-gradient(120deg,#181321,#131019);border:1px solid #614978;border-radius:20px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:30px;padding:22px;align-items:center;overflow:hidden}
.jb-hero-art{height:212px;position:relative;overflow:hidden;border:1px dashed #a27cbd;border-radius:15px;background:radial-gradient(circle at 40% 20%,#532a71,#1c1526 66%,#121019);display:grid;place-items:center}
.jb-hero-art:before{content:"";position:absolute;inset:11px;border:1px solid #8461984d;border-radius:10px}
.jb-hero-disc,.jb-preview-vinyl{display:block;border-radius:50%;background:repeating-radial-gradient(circle at center,#14101e 0 4px,#372946 5px 6px,#100c18 7px 10px);box-shadow:0 20px 42px #030306a8}
.jb-hero-disc{width:178px;height:178px;border:8px solid #32203c;transform:translate(34px,-24px)}
.jb-hero-disc:after,.jb-preview-vinyl:after{content:"";display:block;position:relative;top:calc(50% - 20px);left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:#d4fd88;border:10px solid #9a6ed0}
.jb-hero-art-note{position:absolute;bottom:12px;left:12px;font-size:10px;letter-spacing:.13em;font-weight:900;line-height:1.4;background:#181122d9;border:1px solid #8b6ca5;border-radius:8px;padding:6px 11px}
.jb-hero-copy .eyebrow{color:var(--jb-lime)}
.jb-hero-copy h2{font-size:clamp(33px,4.6vw,66px);font-weight:950;letter-spacing:-.035em;line-height:.95;margin:6px 0 14px}
.jb-hero-copy h2 em{color:var(--jb-lime);font-style:normal}
.jb-hero-copy p:not(.eyebrow){color:#c7b9d4;max-width:760px;line-height:1.6;margin:0}
.jb-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.jb-chips span{font-size:11px;color:#d6c1ed;font-weight:700;padding:7px 11px;border:1px solid #75518b;border-radius:30px;background:#271b30}
.jb-cloud-note{margin:16px 0;display:flex;gap:14px;align-items:flex-start;border:1px solid #735b39;background:#302518;border-radius:13px;padding:14px 17px}
.jb-cloud-note>span{color:#ffd28f;font-size:30px;line-height:1}
.jb-cloud-note strong{color:#ffe4b6;font-size:14px}
.jb-cloud-note p{font-size:12px;margin:5px 0 0;color:#e3c9aa;line-height:1.5}
.jb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:17px 0}
.jb-stats>div{border:1px solid #59476b;background:linear-gradient(140deg,#2b1e36,#1b1725);border-radius:13px;padding:14px 19px;display:grid;gap:1px}
.jb-stats small{font-size:10px;font-weight:800;color:#c5b0dc;letter-spacing:.15em}
.jb-stats strong{font-size:clamp(23px,3vw,35px);font-weight:950;color:var(--jb-lime)}
.jb-columns{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(285px,.85fr);gap:16px;align-items:start}
.jb-main-col,.jb-side-col{min-width:0;display:grid;gap:16px}
.jb-panel{border-radius:16px;border:1px solid var(--jb-line);background:linear-gradient(145deg,#211a2c,#18151e);padding:20px;min-width:0}
.jb-panel h3{font-size:clamp(18px,2.4vw,24px);margin:3px 0 5px;line-height:1.2}
.jb-panel p{color:var(--jb-muted)}
.jb-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.jb-section-head p{margin:4px 0 0;font-size:12px}
.jb-section-kicker{font-size:10px!important;font-weight:900;letter-spacing:.17em;color:var(--jb-lime)!important;margin:0 0 6px!important}
.jb-glyph{font-size:44px;color:#c5a1fa;line-height:1}
.jb-dropzone{display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;gap:7px;min-height:206px;cursor:pointer;border:2px dashed #82569f;border-radius:14px;background:radial-gradient(ellipse at top,#352544 0%,#21192d 70%);padding:22px 16px;transition:background .15s,border-color .15s}
.jb-dropzone:hover,.jb-dropzone.is-dragging,.jb-dropzone:focus-visible{outline:2px solid #c9f58d;outline-offset:2px;background:#31213f;border-color:#d0b1fb}
.jb-upload-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;border:1px solid #b994e6;color:var(--jb-lime);font-size:33px}
.jb-dropzone strong{font-size:18px}
.jb-dropzone>span:not(.jb-upload-icon):not(.jb-drop-action){color:#c6b3d6;font-size:13px}
.jb-drop-action{display:inline-flex;border-radius:8px;color:#171421;background:var(--jb-lime);padding:9px 15px;font-size:12px;font-weight:950;margin:5px 0}
.jb-dropzone small{font-size:11px;color:#baa8c7}
.jb-feedback{font-size:12px;color:#b5f6c7!important;line-height:1.5;min-height:20px;margin-bottom:0}
.jb-feedback.is-error{color:#ffbcc1!important}
.jb-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.44fr);gap:9px;margin-bottom:14px}
.jb-filter-row input,.jb-filter-row select,.jb-side-col input:not([type=range]),.jb-side-col select{width:100%;min-width:0;background:#15111d;border:1px solid #715487;border-radius:9px;color:#f5edff;padding:11px 12px}
.jb-filter-row input:focus,.jb-filter-row select:focus,.jb-side-col input:focus{outline:2px solid #c8ff86;outline-offset:1px}
.jb-search-label{min-width:0}
.jb-count{font-size:11px;color:#e6d0f8;background:#39284b;border-radius:20px;padding:7px 11px;white-space:nowrap}
.jb-track-list{display:grid;gap:9px;max-height:630px;overflow:auto;padding:1px 4px 2px 0}
.jb-track{display:grid;grid-template-columns:57px minmax(120px,1fr) auto;gap:12px;align-items:center;padding:11px;background:#19121f;border:1px solid #4c3a5e;border-radius:11px}
.jb-track.is-playing{border-color:#d7ff89;box-shadow:0 0 0 1px #c6f58133}
.jb-track-cover{display:grid;place-items:center;width:57px;height:57px;border:1px solid #77538f;border-radius:9px;background:linear-gradient(135deg,#6d3a8b,#242137);font-size:28px;color:#eaffb8}
.jb-track-meta{min-width:0;display:grid;gap:4px}
.jb-track-meta strong{font-size:13px;overflow-wrap:anywhere;line-height:1.3}
.jb-track-meta span{font-size:11px;color:#b9a4c6;overflow-wrap:anywhere}
.jb-track-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.jb-track-button{background:#342641;color:#f4e9ff;border:1px solid #705489;border-radius:7px;padding:7px 8px;font-size:11px;font-weight:750;min-height:30px}
.jb-track-button:hover:not(:disabled){border-color:#deff9b;color:#e9ffbb}
.jb-track-button:disabled{opacity:.3;cursor:default}
.jb-track-actions .jb-track-button:first-child{min-width:34px;background:#d6f894;border-color:#d6f894;color:#22172a}
.jb-empty{text-align:center;border:1px dashed #78568a;border-radius:11px;background:#241b2e;padding:35px 12px;color:#cab8d8;font-size:13px}
.jb-field-label,.jb-volume-label{display:flex;justify-content:space-between;gap:8px;color:#decced;font-size:12px;font-weight:750;margin:10px 0 8px}
.jb-playlist-create{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:11px}
#jukebox-page .button{white-space:nowrap;padding:10px 13px}
#jukebox-page .jb-delete-playlist{margin-top:10px;width:100%}
.jb-mini-help{color:#b9a8c8;font-size:11px;line-height:1.55;margin:11px 0 0}
.jb-now h3{margin-bottom:16px}
.jb-preview-art{height:160px;background:radial-gradient(circle,#4c315f,#1b1424 70%);border-radius:12px;border:1px dashed #856298;position:relative;overflow:hidden;display:grid;place-items:center}
.jb-preview-vinyl{width:142px;height:142px;border:7px solid #2e2039}
.jb-preview-art small{position:absolute;bottom:7px;left:10px;font-size:9px;letter-spacing:.12em;font-weight:900;padding:4px 7px;background:#16101dc9;border-radius:4px;color:#e6caef}
#jb-preview-title{display:block;margin-top:13px;font-size:15px;line-height:1.3;overflow-wrap:anywhere}
#jb-preview-artist{font-size:12px;margin:4px 0 14px}
.jb-preview-controls{display:flex;align-items:center;gap:8px}
.jb-preview-controls button{width:39px;height:39px;border-radius:50%;border:1px solid #bd9eda;background:#392648;color:white;font-size:17px;cursor:pointer}
.jb-preview-controls button:first-child{color:#1b1a22;background:var(--jb-lime);border-color:var(--jb-lime)}
.jb-preview-controls button:disabled{opacity:.4;cursor:default}
#jb-preview-time{font-size:12px;color:#cfbcdb;margin-left:auto;font-variant-numeric:tabular-nums}
#jb-preview-volume{width:100%;accent-color:#c9f58e}
.jb-footer{margin:24px 0 6px;text-align:center;font-size:10px;letter-spacing:.17em;color:#ad90c7}
.jb-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1000px){.jb-columns{grid-template-columns:minmax(0,1fr)}.jb-side-col{grid-template-columns:repeat(2,minmax(0,1fr))}.jb-hero{grid-template-columns:200px minmax(0,1fr);gap:17px}.jb-hero-art{height:200px}}
@media(max-width:700px){.jb-hero{grid-template-columns:1fr}.jb-hero-art{height:150px}.jb-stats{gap:7px}.jb-stats>div{padding:10px}.jb-side-col{grid-template-columns:1fr}.jb-track{grid-template-columns:46px minmax(0,1fr)}.jb-track-cover{width:46px;height:46px}.jb-track-actions{grid-column:1/-1;justify-content:flex-start}.jb-filter-row{grid-template-columns:1fr}.jb-panel{padding:14px}.jb-card-art{min-height:185px}.jb-card-vinyl{width:170px;height:170px}}

/* OFC-JUKEBOX-042: administracao DJ removida do Moonlight; busca ocupa largura completa. */
#moonlight-page .ml-operator-grid{grid-template-columns:minmax(0,1fr)}
#moonlight-page #ml-client .ml-concept-dj-strip{display:none!important}