/* Osmo-inspired edge-to-edge container; existing filter grouping stays intact. */
.hh-modern-ui #search-offcanvas .search-panel{inset:76px 0 0;background:rgb(0 0 0/.28);backdrop-filter:blur(6px)}
/* No tint gradient behind the topbar; its progressive blur layers stay. */
.hh-modern-ui header .hh-topbar-blur{background:none}
/* The topbar gets a bottom edge while the drawer hangs from it: an inset line inside the 76px bar, in the same
   subtle colour and at the same height as the sidebar logo's border (a real border would add 1px). */
.hh-modern-ui:has(#search-offcanvas[data-menu-open=true]) header.headroom{box-shadow:inset 0 -1px 0 var(--hh-border-subtle)}
.hh-modern-ui #search-offcanvas .hh-filter-shell{top:0;left:0;right:0;width:100%;max-width:none;height:auto;padding:0;border-radius:0;will-change:height}
.hh-modern-ui #search-offcanvas .hh-filter-surface{position:relative;width:100%;border-radius:0;border:0;background:var(--hh-surface);box-shadow:0 16px 32px rgb(0 0 0/.1);max-height:calc(100dvh - 76px);overflow-y:auto}
.dark .hh-modern-ui #search-offcanvas .hh-filter-surface{background:var(--hh-canvas)}
.hh-modern-ui #search-offcanvas .hh-filter-inset{padding:24px 32px;border-radius:0;box-shadow:none}
.hh-modern-ui #search-offcanvas .hh-filter-grid{gap:20px 40px}
.hh-modern-ui #search-offcanvas .hh-filter-heading{padding-bottom:16px;border-bottom:1px solid var(--hh-border);margin-bottom:4px}
.hh-modern-ui #search-offcanvas .hh-filter-heading h3{font-size:22px;font-weight:500;letter-spacing:-.025em;line-height:1.2}
.hh-modern-ui #search-offcanvas .hh-filter-heading button{border:1px solid var(--hh-border);border-radius:0;width:36px;height:36px}
.hh-modern-ui #search-offcanvas .hh-filter-actions{padding-top:16px;border-top:1px solid var(--hh-border)}
@media(max-width:1023px){
 .hh-modern-ui #search-offcanvas .search-panel{inset:0}
 .hh-modern-ui #search-offcanvas .hh-filter-shell,.hh-modern-ui #search-offcanvas .hh-filter-surface{max-height:100dvh}
 .hh-modern-ui #search-offcanvas .hh-filter-inset{padding:20px 24px}
 .hh-modern-ui #search-offcanvas .hh-filter-grid{gap:16px 24px}
}
@media(max-width:767px){
 .hh-modern-ui #search-offcanvas .hh-filter-inset{padding:16px}
 .hh-modern-ui #search-offcanvas .hh-filter-grid{gap:12px}
 .hh-modern-ui #search-offcanvas .hh-filter-heading button{width:44px;height:44px}
 .hh-modern-ui #search-offcanvas .hh-filter-actions{bottom:-16px;padding-block:16px}
}

.hh-modern-ui #search-offcanvas[data-menu-open=true] .search-panel{transition-duration:350ms!important}
.hh-modern-ui #search-offcanvas[data-menu-open=false] .search-panel{transition-duration:250ms!important}
@media(prefers-reduced-motion:reduce){.hh-modern-ui #search-offcanvas[data-menu-open] .search-panel{transition-duration:0ms!important}}

.hh-modern-ui #search-offcanvas #search-tag-filters>label{display:block;padding:0;font-size:12px;line-height:16px;color:var(--hh-muted)}

/* Keep the existing groups; quiet defaults make deliberate selections easier to scan. */
.hh-modern-ui #search-offcanvas :is(.hh-filter-heading,.hh-filter-actions){border-color:var(--hh-border-subtle)}
.hh-modern-ui #search-offcanvas .hh-filter-heading button{border:0;border-radius:6px;width:44px;height:44px}
.hh-modern-ui #search-offcanvas .hh-filter-heading button svg{width:20px;height:20px}
.hh-modern-ui #search-offcanvas :is(#genre-combobox,#versions-combobox,#decade-combobox,#search-tag-filters) [role=combobox]{min-height:40px;border-radius:6px;border:1px solid var(--hh-border-subtle);background:transparent;letter-spacing:0;text-transform:none}
.hh-modern-ui #search-offcanvas .key-input{border-color:color-mix(in srgb,var(--hh-key-color) 12%,var(--hh-border-subtle));background:color-mix(in srgb,var(--hh-key-color) 4%,var(--hh-surface));border-radius:4px;transition:background-color 160ms,border-color 160ms}
.hh-modern-ui #search-offcanvas .key-input:hover{background:color-mix(in srgb,var(--hh-key-color) 12%,var(--hh-surface))}
.hh-modern-ui #search-offcanvas .key-input:has(input:checked){background:color-mix(in srgb,var(--hh-key-color) 22%,var(--hh-surface));border-color:var(--hh-key-color);box-shadow:inset 0 -2px var(--hh-key-color)}
.hh-modern-ui #search-offcanvas .key-input:has(input:checked) label{color:var(--hh-text);font-weight:600}
.hh-modern-ui #search-offcanvas .key-input:has(input:checked)::after{content:'✓';position:absolute;right:3px;top:0;font-size:9px;line-height:12px;color:var(--hh-text);pointer-events:none}
.hh-modern-ui #search-offcanvas :is(#bpm-slider,.hh-audio-filters>div){display:grid;grid-template-columns:1fr auto;gap:16px 8px;padding-top:0;min-height:56px;align-content:start}
.hh-modern-ui #search-offcanvas :is(#bpm-slider,.hh-audio-filters>div)>label{width:auto}
.hh-modern-ui #search-offcanvas .hh-range-value{font-size:12px;line-height:16px;color:var(--hh-text);font-variant-numeric:tabular-nums;text-align:right}
.hh-modern-ui #search-offcanvas .dual-range{--range-size:2px;grid-column:1/-1;width:auto;margin:0 7px 8px}
.hh-modern-ui #search-offcanvas .dual-range .highlight{left:calc(var(--x-1) + 7px);background:var(--hh-muted)!important;opacity:.45}
.hh-modern-ui #search-offcanvas .dual-range[data-filtered=true] .highlight{background:var(--hh-accent)!important;opacity:1}
.hh-modern-ui #search-offcanvas .dual-range .handle{width:14px;height:14px;background:var(--hh-text)!important;box-shadow:0 0 0 2px var(--hh-surface)}
.hh-modern-ui #search-offcanvas .dual-range .handle::before{inset:-15px}
.hh-modern-ui #search-offcanvas .dual-range .handle::after{display:none}
.hh-modern-ui #search-offcanvas .dual-range[data-filtered=true] .handle{background:var(--hh-accent)!important}
.hh-modern-ui #search-offcanvas .hh-filter-actions button{min-height:40px;border-radius:6px}
@media(max-width:1023px){
 .hh-modern-ui #search-offcanvas :is(#genre-combobox,#versions-combobox,#decade-combobox,#search-tag-filters) [role=combobox]{min-height:44px}
}
/* Pool For You: the activity row's title stays hidden now that its evidence line is gone. */
.hh-modern-ui .hh-pool-discovery #pool-for-you .hh-activity-releases .hh-for-you-section-heading h2{display:none}
/* The Search & filters icon button: no outline, a circle (its hover fill comes from refresh.css). */
.hh-modern-ui .hh-filter-entry--icon{border:0;border-radius:50%}
/* Remixer cards use the same corner radius as the playlist covers (.hh-collection-cover). */
.hh-modern-ui #remixer-carousel img{border-radius:var(--hh-control-radius)}
/* Play buttons stay the desktop size (32px) on phones too; refresh.css's 44px minimum is for the other row controls. */
.hh-modern-ui .result--main .btn-playpause{min-width:32px;min-height:32px}
/* On phones, a little more room between the play button and the title beside it. */
@media(max-width:767px){.hh-modern-ui .result--main>.track-holder{margin-inline-end:6px}}
/* Phones: play buttons 36px, about 10% under the ~40px they were drawing at. */
@media(max-width:767px){.hh-modern-ui .result--main .btn-playpause{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important}}
@media(max-width:767px){.hh-modern-ui .hh-track-sortheader{padding-left:10px}}

/* "Vol 23" chip: primary-tinted background, primary→secondary gradient text, no border. */
.hh-vol-chip{color:transparent;background-image:linear-gradient(to right,var(--primary),var(--secondary)),linear-gradient(color-mix(in srgb,var(--primary) 14%,transparent),color-mix(in srgb,var(--primary) 14%,transparent));background-origin:content-box,padding-box;-webkit-background-clip:text,padding-box;background-clip:text,padding-box}
.dark .hh-vol-chip{filter:brightness(1.5)}
/* Pool page: a 16px gutter on phones (the content wrapper has no horizontal padding below md). */
@media(max-width:767px){.hh-modern-ui.page-template-template-pool #content{padding-inline:16px}}
@media(max-width:767px){.hh-modern-ui.page-template-template-pool #content>.hh-pool-discovery{margin-inline:-16px}}
@media(max-width:767px){.hh-modern-ui.page-template-template-pool #content>.popular-hashtags-container{margin-inline:-16px}}
/* Release rows everywhere: 4px side padding instead of 12px. */
.hh-modern-ui .result--main{padding-inline:4px}