#ml-search-block {
    margin-bottom: 2em;
}
#ml-search-form {
    display: flex;
    gap: 0.5em;
    margin-bottom: 1em;
}
#ml-search-form input[type="text"] {
    flex: 1 1 auto;
    padding: 0.5em;
    font-size: 1em;
}
#ml-search-form button {
    padding: 0.5em 1em;
}
.ml-filters-row {
    display: flex;
    gap: 2em;
    margin-bottom: 1em;
    flex-wrap: wrap;
}
.ml-filter-group span {
    font-weight: bold;
    margin-right: 0.5em;
}
.ml-filter {
    margin-right: 1em;
    text-decoration: underline;
    cursor: pointer;
}
.ml-filter.active {
    font-weight: bold;
    color: #c00;
    text-decoration: none;
}
#ml-loader {
    position: fixed;
    z-index: 10001;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ml-spinner {
    border: 6px solid #eee;
    border-top: 6px solid #333;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: ml-spin 1s linear infinite;
}
@keyframes ml-spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}
.ml-filter-actions { margin-top: .5rem; }
#ml-clear-search{
    display:inline-block;
    padding:.35rem .75rem;
    border:1px solid #ddd;
    background:#f7f7f7;
    cursor:pointer;
    border-radius:4px;
}
#ml-clear-search:hover{ background:#eee; }

.mls-form { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; margin-bottom: 1em; }
.mls-form input[type="search"] { flex: 1 1 12em; min-width: 0; }
.mls-form .mls-tracklist { display: flex; gap: .4em; align-items: center; flex-basis: 100%; }
.mls-form .mls-tracklist input { margin: 0; }
.mls-error { color: #b32d2e; }
.mls-form .mls-error { flex-basis: 100%; margin: 0; }
.mls-form .mls-error[hidden] { display: none; }