/* Song search toolbars (play / maps): full-width search on top, compact filters below. */
.filterbar{flex-wrap:wrap;align-items:center;gap:10px}
.filterbar>input{order:0;flex:1 1 100%;min-width:0;font-size:16px;padding:13px 16px 13px 44px;border-radius:12px;border-color:#2c3366;background:#10142a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a93c0' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center/18px}
.filterbar>input:focus{outline:none;border-color:#62d2ff;box-shadow:0 0 0 3px #62d2ff22}
.filterbar>input::-webkit-search-cancel-button{cursor:pointer}
.filterbar>.key-picker{order:1}
.filterbar>button{order:2;padding:7px 13px;font-size:13px;border-radius:999px;background:transparent}
.filterbar>select{order:3;width:auto;max-width:240px;padding:7px 10px;font-size:13px;border-radius:10px}
.filterbar>select#library-sort{margin-left:auto}
.filterbar>button.filter-random{order:4}
.filterbar>select[hidden]{display:none}

/* Key filters render as one segmented control everywhere (play, maps, ranked). */
.key-picker{display:inline-flex;flex-wrap:nowrap;gap:0;margin:0;border:1px solid #2c3366;border-radius:10px;overflow:hidden;width:auto}
.key-picker button{border:0;border-radius:0;margin:0;padding:7px 12px;font-size:13px;background:transparent;color:#8a93c0}
.key-picker button+button{border-left:1px solid #2c3366}
.key-picker button:hover{color:#e8ecff;background:#1d2347}
.key-picker button[aria-pressed=true]{background:#26306a;color:#e8ecff;border-color:#2c3366}

@media (max-width:640px){
 .filterbar>select#library-sort{margin-left:0}
 .filterbar>select{flex:1 1 auto;max-width:none}
 .key-picker button{padding:7px 9px}
}