/* MIXHUB_DJ_POOL_SETTINGS_V1 */
.mixhub-dj-settings-dock[hidden]{display:none!important}
.mixhub-dj-settings-dock{position:fixed;right:0;top:calc(55% - 92px);z-index:1090;display:flex;align-items:center;filter:drop-shadow(0 14px 28px rgba(0,0,0,.3))}
.mixhub-dj-settings-trigger{display:grid;place-items:center;width:54px;height:54px;border:1px solid rgba(255,255,255,.13);border-right:0;border-radius:17px 0 0 17px;background:linear-gradient(145deg,#242735,#141620);color:#d9caff;font-size:1.2rem;box-shadow:inset 0 1px rgba(255,255,255,.04);transition:background .18s ease,color .18s ease,transform .18s ease}
.mixhub-dj-settings-trigger:hover,.mixhub-dj-settings-dock.is-open .mixhub-dj-settings-trigger{background:linear-gradient(145deg,#7450bd,#4d2c8f);color:#fff}
.mixhub-dj-settings-trigger:hover i{transform:rotate(35deg)}
.mixhub-dj-settings-trigger i{transition:transform .25s ease}
.mixhub-dj-settings-panel{position:absolute;right:66px;top:-14px;width:min(390px,calc(100vw - 88px));padding:1rem;border:1px solid rgba(255,255,255,.11);border-radius:20px;background:linear-gradient(150deg,rgba(22,24,34,.985),rgba(10,11,18,.99));box-shadow:0 28px 70px rgba(0,0,0,.48);backdrop-filter:blur(18px)}
.mixhub-dj-settings-panel[hidden]{display:none!important}
.mixhub-dj-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.15rem .1rem .8rem}
.mixhub-dj-settings-head .eyebrow{display:block;margin-bottom:.18rem;color:#9d7ed9;font-size:.62rem;letter-spacing:.14em}
.mixhub-dj-settings-head h3{margin:0;color:#fff;font-size:1.15rem;font-weight:800}
.mixhub-dj-settings-close{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.04);color:#aaa3b2}
.mixhub-dj-settings-close:hover{background:rgba(255,255,255,.08);color:#fff}
.mixhub-dj-settings-section{padding:.8rem;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}
.mixhub-dj-settings-label{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.72rem}
.mixhub-dj-settings-label strong{color:#fff;font-size:.82rem}
.mixhub-dj-settings-label small{max-width:210px;color:#716b79;font-size:.65rem;line-height:1.35;text-align:right}
.mixhub-key-notation-options{display:grid;gap:.45rem}
.mixhub-key-notation-options>button{display:grid;grid-template-columns:76px minmax(0,1fr) 24px;align-items:center;gap:.68rem;width:100%;padding:.62rem .68rem;border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(7,8,13,.6);color:#d4cfda;text-align:left;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.mixhub-key-notation-options>button:hover{border-color:rgba(142,96,225,.35);background:rgba(120,76,199,.08)}
.mixhub-key-notation-options>button.is-active{border-color:rgba(151,105,236,.58);background:linear-gradient(135deg,rgba(125,78,210,.21),rgba(70,43,124,.16));color:#fff}
.mixhub-key-notation-options>button>i{opacity:0;color:#cbb2ff;font-size:1rem}
.mixhub-key-notation-options>button.is-active>i{opacity:1}
.mixhub-key-option-sample{display:grid;place-items:center;min-height:34px;padding:.2rem .42rem;border-radius:9px;background:rgba(130,85,232,.13);color:#d2c0fa;font-size:.72rem;font-weight:800;letter-spacing:.02em}
.mixhub-key-notation-options b,.mixhub-key-notation-options small{display:block}
.mixhub-key-notation-options b{font-size:.76rem}
.mixhub-key-notation-options small{margin-top:.12rem;color:#7d7785;font-size:.63rem}
.mixhub-key-notation-options>button.is-active small{color:#a79eaf}
.mixhub-dj-settings-coming-soon{display:flex;align-items:center;gap:.48rem;padding:.72rem .25rem .05rem;color:#5f5a66;font-size:.63rem}
.mixhub-dj-settings-coming-soon i{color:#7c678f}

@media(max-width:767.98px){
 .mixhub-dj-settings-dock{top:auto;bottom:181px}
 .mixhub-dj-settings-trigger{width:50px;height:50px;border-radius:16px 0 0 16px}
 .mixhub-dj-settings-panel{position:fixed;right:12px;bottom:82px;top:auto;width:calc(100vw - 24px);max-height:min(520px,calc(100vh - 110px));overflow:auto;border-radius:18px}
 .mixhub-dj-settings-label{display:block}
 .mixhub-dj-settings-label small{display:block;max-width:none;margin-top:.2rem;text-align:left}
 .mixhub-key-notation-options>button{grid-template-columns:68px minmax(0,1fr) 22px}
}