.hap-player{--hap-bg:#050505;--hap-panel:#111318;--hap-line:#2b2f38;--hap-text:#f7f7f7;--hap-icons:var(--hap-text);--hap-muted:#aeb4bf;--hap-accent:#f4f7fb;--hap-active:#20242c;--hap-pad-y:8px;--hap-pad-x:13px;--hap-radius:12px;--hap-btn:30px;--hap-font:13px;--hap-progress:8px;--hap-shadow:0 10px 24px rgba(0,0,0,.16);width:100%;margin:18px 0;font:inherit;color:var(--hap-text);position:relative;z-index:1}.hap-player audio{display:none!important}.hap-player-bar{box-sizing:border-box;min-height:50px;display:flex;align-items:center;gap:8px;padding:var(--hap-pad-y) var(--hap-pad-x);background:var(--hap-bg);border-radius:var(--hap-radius);box-shadow:var(--hap-shadow)}.hap-player-bar button{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:var(--hap-text);cursor:pointer;padding:0;margin:0;width:var(--hap-btn);height:var(--hap-btn);display:inline-flex;align-items:center;justify-content:center;border-radius:7px;font:inherit;line-height:1;flex:0 0 auto}.hap-player-bar button:hover,.hap-player-bar button:focus-visible{background:rgba(255,255,255,.12);outline:2px solid rgba(255,255,255,.55);outline-offset:1px}.hap-play{font-size:17px!important}.hap-prev,.hap-next{font-size:15px!important}.hap-current-time,.hap-duration{font-size:12px;font-variant-numeric:tabular-nums;color:var(--hap-text);white-space:nowrap;min-width:34px;text-align:center}.hap-seek,.hap-volume-range{-webkit-appearance:none;appearance:none;height:var(--hap-progress);border-radius:999px;background:#9ea2a8;margin:0;cursor:pointer}.hap-seek{flex:1 1 auto;min-width:70px}.hap-volume-range{width:72px;flex:0 0 72px;height:5px}.hap-seek::-webkit-slider-thumb,.hap-volume-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--hap-accent);border:0;box-shadow:0 0 0 1px rgba(0,0,0,.2)}.hap-seek::-moz-range-thumb,.hap-volume-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--hap-accent);border:0}.hap-player-panel{box-sizing:border-box;background:var(--hap-panel);border:1px solid var(--hap-line);border-top:0;margin:-7px 8px 0;padding:15px 10px 10px;border-radius:0 0 var(--hap-radius) var(--hap-radius);box-shadow:var(--hap-shadow)}.hap-player-panel[hidden]{display:none!important}.hap-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 6px 9px;border-bottom:1px solid var(--hap-line)}.hap-panel-head strong,.hap-panel-head small{display:block}.hap-panel-head strong{font-size:13px}.hap-panel-head small{margin-top:2px;color:var(--hap-muted);font-size:11px}.hap-pro-controls{display:flex;align-items:center;gap:10px}.hap-pro-controls label{font-size:11px;color:var(--hap-muted);display:flex;align-items:center;gap:5px;white-space:nowrap}.hap-pro-controls input{margin:0}.hap-reset{appearance:none;border:0;background:transparent;color:var(--hap-muted);font:inherit;font-size:11px;cursor:pointer}.hap-player-track-list{display:block;margin-top:6px}.hap-track{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:5px;min-height:38px;border-radius:7px;padding:2px 5px;color:var(--hap-text);border:1px solid transparent}.hap-player.is-pro .hap-track{grid-template-columns:22px 23px minmax(0,1fr) auto}.hap-track:hover{background:rgba(255,255,255,.07)}.hap-track.is-active{background:var(--hap-active);border-color:rgba(255,255,255,.12)}.hap-track.is-disabled .hap-track-button{opacity:.42;text-decoration:line-through}.hap-track-num,.hap-drag-handle{text-align:center;color:var(--hap-muted);font-size:11px}.hap-drag-handle{cursor:grab;font-size:15px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.hap-track-check{display:flex;align-items:center;justify-content:center}.hap-track-check input{width:14px;height:14px;margin:0}.hap-track-button{appearance:none;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;font-size:var(--hap-font);padding:7px 6px;border-radius:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.hap-track-button strong,.hap-track-button small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hap-track-button small{font-size:10px;color:var(--hap-muted);margin-top:2px}.hap-track-button:hover,.hap-track-button:focus-visible{background:rgba(255,255,255,.08);outline:none}.hap-track-duration{font-size:11px;color:var(--hap-muted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}.hap-track.is-dragging{opacity:.4}.hap-track.drag-over{border-color:var(--hap-accent)}
@media(max-width:640px){.hap-player-bar{gap:5px;padding-left:8px;padding-right:8px}.hap-current-time{display:none}.hap-volume-range{display:none}.hap-player-panel{margin-left:4px;margin-right:4px}.hap-panel-head{align-items:flex-start}.hap-pro-controls{gap:5px}.hap-prev,.hap-next{width:25px!important}}
/* 1.0.1 status visibility + lyrics */
.hap-current-time,.hap-remaining-time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--hap-text);white-space:nowrap;min-width:38px;text-align:center}.hap-track-position,.hap-volume-value{font-size:11px;font-variant-numeric:tabular-nums;color:var(--hap-muted);white-space:nowrap;flex:0 0 auto}.hap-track-position{min-width:34px;text-align:center}.hap-volume-value{min-width:34px;text-align:left}.hap-seek,.hap-volume-range{background:linear-gradient(to right,var(--hap-accent) 0%,var(--hap-accent) 0%,#60656d 0%,#60656d 100%)}.hap-seek:focus-visible,.hap-volume-range:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:3px}.hap-lyrics-toggle.has-lyrics{background:rgba(255,255,255,.1)}.hap-lyrics-content{white-space:pre-wrap;line-height:1.65;color:var(--hap-text);font-size:var(--hap-font);padding:16px 9px 10px;max-height:min(55vh,520px);overflow:auto}.hap-lyrics-panel .hap-panel-head{padding-bottom:10px}.hap-lyrics-panel .hap-lyrics-title{font-size:13px}.hap-lyrics-panel .hap-lyrics-subtitle{margin-top:2px;color:var(--hap-muted);font-size:11px}
@media(max-width:760px){.hap-track-position{display:none}.hap-volume-value{display:none}}
@media(max-width:640px){.hap-remaining-time{display:none}.hap-current-time{display:inline-block}.hap-player-bar{gap:4px}.hap-player-bar button{width:27px;height:27px}.hap-seek{min-width:55px}}


/* 1.0.2 slider clarity fixes */
.hap-seek,.hap-volume-range{position:relative;border:0;outline:none;background:linear-gradient(to right,var(--hap-accent) 0%,var(--hap-accent) 0%,#60656d 0%,#60656d 100%)}
.hap-seek{height:10px}
.hap-volume-range{height:8px}
.hap-seek::-webkit-slider-runnable-track,.hap-volume-range::-webkit-slider-runnable-track{height:100%;background:transparent;border:0;border-radius:999px}
.hap-seek::-moz-range-track,.hap-volume-range::-moz-range-track{height:100%;background:transparent;border:0;border-radius:999px}
.hap-seek::-webkit-slider-thumb,.hap-volume-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0;background:transparent;border:0;box-shadow:none}
.hap-seek::-moz-range-thumb,.hap-volume-range::-moz-range-thumb{width:0;height:0;background:transparent;border:0;box-shadow:none}
.hap-seek:focus,.hap-volume-range:focus{outline:none}
.hap-seek:focus-visible,.hap-volume-range:focus-visible{outline:2px solid rgba(255,255,255,.68);outline-offset:3px}
.hap-current-time,.hap-remaining-time{min-width:44px}
.hap-volume-value{min-width:38px}

/* 1.0.3 volume thumb fix */
.hap-volume-range::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:0!important;height:0!important;opacity:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.hap-volume-range::-moz-range-thumb{width:0!important;height:0!important;opacity:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
.hap-volume-range::-ms-thumb{width:0!important;height:0!important;opacity:0!important;background:transparent!important;border:0!important;box-shadow:none!important}


/* 1.0.4 suppress theme/browser loading-dot artifacts inside player bar */
.hap-player::before,.hap-player::after,
.hap-player-bar::before,.hap-player-bar::after,
.hap-player-bar *::before,.hap-player-bar *::after{
    content:none!important;
    display:none!important;
    animation:none!important;
    opacity:0!important;
}
.hap-player-bar{background-image:none!important;}

/* 1.0.5 consistent mobile control icons */
.hap-player .hap-player-bar button{
    -webkit-appearance:none!important;
    appearance:none!important;
    background:transparent!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
    color:var(--hap-icons)!important;
    text-shadow:none!important;
}
.hap-player .hap-player-bar button:hover,
.hap-player .hap-player-bar button:focus,
.hap-player .hap-player-bar button:active{
    background:rgba(255,255,255,.10)!important;
    box-shadow:none!important;
}
.hap-player .hap-icon{
    display:block!important;
    width:16px;
    height:16px;
    fill:currentColor;
    stroke:none;
    pointer-events:none;
}
.hap-player .hap-play .hap-icon{width:18px;height:18px}
@media(max-width:640px){
    .hap-player .hap-player-bar button{
        background:transparent!important;
        border-radius:6px!important;
        min-width:27px!important;
        min-height:27px!important;
        padding:0!important;
    }
    .hap-player .hap-player-bar button .hap-icon{
        width:15px!important;
        height:15px!important;
    }
    .hap-player .hap-player-bar .hap-play .hap-icon{
        width:17px!important;
        height:17px!important;
    }
}

/* 1.0.7 touch dragging + compact playlist rows */
.hap-seek,.hap-volume-range{
    touch-action:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
}
.hap-player-panel{
    padding:9px 8px 7px;
}
.hap-panel-head{
    padding:0 5px 6px;
}
.hap-player-track-list{
    margin-top:3px;
}
.hap-track{
    min-height:0!important;
    padding:1px 4px!important;
    gap:4px!important;
    border-radius:6px;
}
.hap-track-button{
    min-height:0!important;
    margin:0!important;
    padding:4px 5px!important;
    line-height:1.15!important;
}
.hap-track-button strong{
    margin:0!important;
    padding:0!important;
    line-height:1.2!important;
}
.hap-track-button small{
    margin:1px 0 0!important;
    padding:0!important;
    line-height:1.15!important;
}
.hap-track-num,.hap-track-duration{
    line-height:1!important;
}
.hap-track-duration{
    min-width:42px!important;
    padding-right:2px;
}
@media(max-width:640px){
    .hap-player-panel{padding:7px 5px 6px!important;margin-left:2px;margin-right:2px}
    .hap-panel-head{padding:0 4px 5px!important}
    .hap-player-track-list{margin-top:2px!important}
    .hap-track{padding:1px 2px!important;gap:2px!important;grid-template-columns:20px minmax(0,1fr) 40px!important}
    .hap-player.is-pro .hap-track{grid-template-columns:18px 20px minmax(0,1fr) 40px!important}
    .hap-track-button{padding:3px 4px!important;font-size:12px!important}
    .hap-track-button small{font-size:9px!important}
    .hap-track-duration{font-size:10px!important;min-width:38px!important}
}

/* 1.0.10 playlist options visibility */
.hap-playlist-options{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 8px 6px;border-bottom:1px solid var(--hap-line);color:var(--hap-muted)}
.hap-repeat-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.hap-repeat-label input{margin:0;width:15px;height:15px}
.hap-playlist-options .hap-reset{margin-left:auto}
@media(max-width:640px){.hap-playlist-options{padding:6px 5px}.hap-repeat-label{font-size:12px}}

/* 1.0.11 compact control alignment, custom sliders, artwork, and stable selection states */
.hap-player{--hap-artwork-speed:1000ms}
.hap-player-bar{overflow:hidden!important;align-items:center!important}
.hap-player-bar button,
.hap-track-button{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    transform:none!important;
    translate:none!important;
    box-sizing:border-box!important;
}
.hap-player .hap-player-bar button:hover{background:rgba(255,255,255,.08)!important;outline:0!important}
.hap-player .hap-player-bar button:focus{outline:0!important;transform:none!important}
.hap-player .hap-player-bar button:focus:not(:focus-visible){background:transparent!important;box-shadow:none!important}
.hap-player .hap-player-bar button:focus-visible{background:rgba(255,255,255,.06)!important;outline:0!important;box-shadow:0 0 0 2px rgba(255,255,255,.58) inset!important}
.hap-time-toggle{
    width:auto!important;min-width:43px!important;height:var(--hap-btn)!important;
    padding:0 3px!important;border-radius:5px!important;
    font-size:12px!important;font-variant-numeric:tabular-nums!important;
    white-space:nowrap!important;color:var(--hap-text)!important;
}
.hap-slider{
    position:relative;display:block;box-sizing:border-box;align-self:center;
    height:var(--hap-progress);border-radius:999px;background:#60656d;
    margin:0;padding:0;cursor:pointer;touch-action:none!important;
    -webkit-user-select:none!important;user-select:none!important;overflow:hidden;
}
.hap-slider-fill{display:block;width:0;height:100%;background:var(--hap-accent);border-radius:inherit;pointer-events:none}
.hap-seek{flex:1 1 120px;min-width:70px;height:var(--hap-progress)!important;background:#60656d!important}
.hap-volume-range{width:62px;flex:0 0 62px;height:5px!important;background:#60656d!important}
.hap-slider:focus{outline:0}
.hap-slider:focus-visible{outline:2px solid rgba(255,255,255,.68);outline-offset:2px}
.hap-track.is-active{background:var(--hap-active)!important;border-color:transparent!important;box-shadow:none!important;transform:none!important}
.hap-track.is-active .hap-track-button{box-shadow:none!important;transform:none!important}
.hap-track-button:hover,.hap-track-button:focus,.hap-track-button:active{transform:none!important;top:auto!important;box-shadow:none!important}
.hap-track-button:focus:not(:focus-visible){outline:0!important;background:transparent!important}
.hap-track-button:focus-visible{outline:1px solid rgba(255,255,255,.5)!important;outline-offset:-1px!important;background:rgba(255,255,255,.05)!important}
.hap-player.is-compact .hap-volume-range,
.hap-player.is-compact .hap-volume-value,
.hap-player.is-compact .hap-track-position{display:none!important}
.hap-player.is-compact .hap-player-bar{gap:5px!important;padding-left:8px!important;padding-right:8px!important}
.hap-player.is-compact .hap-seek{display:block!important;visibility:visible!important;opacity:1!important;flex:1 1 90px!important;min-width:55px!important}
.hap-player.is-tight .hap-player-bar{gap:4px!important}
.hap-player.is-tight .hap-player-bar button{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important}
.hap-player.is-tight .hap-time-toggle{width:auto!important;min-width:39px!important;font-size:11px!important;padding:0 2px!important}
.hap-player.is-tight .hap-seek{min-width:48px!important}

.hap-artwork-shell{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--hap-artwork-speed) ease,opacity calc(var(--hap-artwork-speed) * .65) ease;overflow:hidden;background:var(--hap-panel);border-radius:var(--hap-radius) var(--hap-radius) 0 0;box-shadow:var(--hap-shadow)}
.hap-artwork-shell.is-open{grid-template-rows:1fr;opacity:1}
.hap-artwork-inner{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hap-artwork-inner img{display:block;width:100%;height:auto;max-height:min(62vh,620px);object-fit:contain;background:var(--hap-panel)}
.hap-artwork-shell.is-open + .hap-player-bar{border-radius:0 0 var(--hap-radius) var(--hap-radius)}
.hap-artwork-toggle[aria-expanded="true"]{background:rgba(255,255,255,.1)!important}

/* Eliminate theme/browser decorative pseudo-elements and animated dots from the real player. */
.hap-player::before,.hap-player::after,
.hap-player-bar::before,.hap-player-bar::after,
.hap-player-bar button::before,.hap-player-bar button::after,
.hap-slider::before,.hap-slider::after,
.hap-slider-fill::before,.hap-slider-fill::after{content:none!important;display:none!important;animation:none!important;box-shadow:none!important}

/* Pro per-player playlist spacing. Core remains tightly stacked. */
.hap-player.is-pro .hap-player-track-list .hap-track + .hap-track{margin-top:var(--hap-spacing,0px)}


/* 1.0.12 front-end stability pass — no admin navigation/page changes. */
.hap-player .hap-player-bar{
    align-items:center!important;
    min-width:0!important;
}
.hap-player .hap-player-bar > *{
    align-self:center!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
}
.hap-player .hap-seek{
    flex:1 1 180px!important;
    min-width:76px!important;
    margin-top:0!important;
    margin-bottom:0!important;
}
.hap-player .hap-volume-range{
    flex:0 1 54px!important;
    width:54px!important;
    min-width:34px!important;
    margin-top:0!important;
    margin-bottom:0!important;
}
.hap-player .hap-time-toggle{
    flex:0 0 auto!important;
    line-height:1!important;
    vertical-align:middle!important;
}
.hap-player .hap-track,
.hap-player .hap-track-button,
.hap-player .hap-track.is-active,
.hap-player .hap-track.is-active .hap-track-button{
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    translate:none!important;
    box-shadow:none!important;
}
.hap-player .hap-track.is-active{
    border-color:transparent!important;
    outline:0!important;
}
.hap-player .hap-track-button:active{
    border:0!important;
    outline:0!important;
    transform:none!important;
}
/* Mouse/touch activation must never leave a visual ring or change geometry.
   Keyboard focus remains visible via :focus-visible. */
.hap-player .hap-player-bar button:focus:not(:focus-visible),
.hap-player .hap-track-button:focus:not(:focus-visible){
    outline:0!important;
    box-shadow:none!important;
}
/* When container space becomes limited, sacrifice secondary readouts and the
   volume slider before the seek timeline. Mute remains available. */
.hap-player.is-compact .hap-volume-range,
.hap-player.is-compact .hap-volume-value,
.hap-player.is-compact .hap-track-position{
    display:none!important;
}
.hap-player.is-compact .hap-seek{
    display:block!important;
    flex:1 1 120px!important;
    min-width:64px!important;
}
.hap-player.is-tight .hap-seek{
    flex:1 1 90px!important;
    min-width:52px!important;
}
/* Belt-and-suspenders suppression for decorative/loading artifacts injected
   by themes around custom sliders. */
.hap-player .hap-player-bar::before,
.hap-player .hap-player-bar::after,
.hap-player .hap-slider::before,
.hap-player .hap-slider::after,
.hap-player .hap-slider-fill::before,
.hap-player .hap-slider-fill::after{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    animation:none!important;
}

/* 1.0.21 appearance fidelity fixes. */
/* Track duration is primary track text, so it follows Text / icons rather than Muted text. */
.hap-player .hap-track-duration{color:var(--hap-text)!important}

/* Make Pro playlist spacing a true layout gap so the setting works consistently. */
.hap-player.is-pro .hap-player-track-list{
    display:flex!important;
    flex-direction:column!important;
    gap:var(--hap-spacing,0px)!important;
}
.hap-player.is-pro .hap-player-track-list .hap-track + .hap-track{margin-top:0!important}

/* Button Size changes the icon itself as well as its hit area. */
.hap-player .hap-player-bar button .hap-icon{
    width:clamp(14px,calc(var(--hap-btn) * .55),32px)!important;
    height:clamp(14px,calc(var(--hap-btn) * .55),32px)!important;
}
.hap-player .hap-player-bar .hap-play .hap-icon{
    width:clamp(16px,calc(var(--hap-btn) * .62),36px)!important;
    height:clamp(16px,calc(var(--hap-btn) * .62),36px)!important;
}


/* 1.0.23 separate text and player-icon colors. */
.hap-player .hap-player-bar button:not(.hap-time-toggle){color:var(--hap-icons,var(--hap-text))!important}
.hap-player .hap-time-toggle{color:var(--hap-text)!important}


/* 1.0.24 desktop volume visibility, artwork framing, and Pro Randomize control. */
.hap-player{--hap-artwork-border-width:0px;--hap-artwork-border-color:#000}
/* Keep the volume slider available on normal desktop-width players. It still
   yields to the seek timeline on compact/mobile players via .is-compact. */
.hap-player .hap-volume-range{display:block}
/* Anything hidden by Pro visibility settings must stay hidden even when a
   component has an explicit display rule elsewhere in the stylesheet. */
.hap-player [hidden]{display:none!important}
/* Square artwork is the recommended format. Let it fill the player width so
   there are no unexplained side gutters, and draw the configurable frame on
   the artwork itself. */
.hap-player .hap-artwork-inner img{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    height:auto!important;
    object-fit:contain!important;
    box-sizing:border-box!important;
    border:var(--hap-artwork-border-width,0px) solid var(--hap-artwork-border-color,#000)!important;
    background:transparent!important;
}
.hap-randomize-label{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;color:var(--hap-muted)}
.hap-randomize-label input{margin:0;width:15px;height:15px;accent-color:var(--hap-accent)}
.hap-randomize-label:has(input:checked){color:var(--hap-text)}
@media(max-width:640px){.hap-randomize-label{font-size:12px}}


/* 1.0.25 minimal-player visibility support. */
.hap-player .hap-seek[hidden],.hap-player .hap-track-position[hidden],.hap-player .hap-lyrics-toggle[hidden],.hap-player .hap-mute[hidden],.hap-player .hap-volume-range[hidden],.hap-player .hap-volume-value[hidden]{display:none!important}


/* 1.0.26 Pro minimal-player centering and progress-bar roundness. */
.hap-player.is-pro.is-centered-controls .hap-player-bar{
    justify-content:center!important;
}
.hap-player.is-pro .hap-seek{
    border-radius:var(--hap-progress-radius,999px)!important;
}
.hap-player.is-pro .hap-seek .hap-slider-fill{
    border-radius:inherit!important;
}


/* 1.0.27: touch scrolling should never leave a non-playing track highlighted. */
@media (hover:none) and (pointer:coarse){
  .hap-player .hap-track:not(.is-active) .hap-track-button:focus,
  .hap-player .hap-track:not(.is-active) .hap-track-button:focus-visible,
  .hap-player .hap-track:not(.is-active) .hap-track-button:active{
    background:transparent!important;
    outline:0!important;
    box-shadow:none!important;
  }
}


/* 1.0.28: centered and visually consistent Repeat/Randomize controls. */
.hap-playlist-options{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    position:relative;
}
.hap-playlist-mode-controls{
    grid-column:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    min-width:0;
}
.hap-repeat-label,.hap-randomize-label,.hap-stay-awake-label{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0!important;
    color:var(--hap-muted)!important;
    font:inherit!important;
    font-size:12px!important;
    font-weight:600!important;
    line-height:1.2!important;
    white-space:nowrap!important;
}
.hap-repeat-label span,.hap-randomize-label span,.hap-stay-awake-label span{color:inherit!important;font:inherit!important;font-size:inherit!important;font-weight:inherit!important}
.hap-repeat-label input,.hap-randomize-label input,.hap-stay-awake-label input,.hap-track-check input{
    margin:0!important;
    width:15px!important;
    height:15px!important;
    accent-color:#0a84ff!important;
}
.hap-randomize-label:has(input:checked){color:var(--hap-muted)!important}
.hap-playlist-options .hap-reset{
    grid-column:3;
    justify-self:end;
    margin-left:0!important;
    white-space:nowrap;
}
@media(max-width:480px){
    .hap-playlist-mode-controls{gap:10px}
    .hap-repeat-label,.hap-randomize-label,.hap-stay-awake-label{font-size:11px!important;gap:5px!important}
    .hap-playlist-options .hap-reset{font-size:10px!important}
}

/* 1.0.30: Repeat/Randomize labels behave like controls, not selectable text. */
.hap-repeat-label,.hap-randomize-label,.hap-stay-awake-label{
    -webkit-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
}
.hap-repeat-label span,.hap-randomize-label span,.hap-stay-awake-label span{
    -webkit-user-select:none;
    user-select:none;
}

/* 1.0.31: touch/pointer visitor reordering on the drag grip. */
.hap-player.is-touch-reordering,.hap-player.is-touch-reordering *{-webkit-user-select:none!important;user-select:none!important}.hap-player.is-touch-reordering .hap-drag-handle{cursor:grabbing}

/* 1.0.33: visual touch-drag feedback without changing the proven 1.0.31 drop behavior. */
.hap-touch-drag-ghost{position:fixed!important;z-index:2147483000!important;pointer-events:none!important;opacity:.5!important;box-shadow:0 10px 28px rgba(0,0,0,.32)!important;transition:none!important;margin:0!important;-webkit-user-select:none!important;user-select:none!important}
.hap-player.is-touch-reordering .hap-track.is-dragging{opacity:.35!important}
.hap-player.is-touch-reordering .hap-track.drag-over{outline:1px solid var(--hap-accent,#fff);outline-offset:-1px}


/* 1.0.34: experimental smooth touch reorder visuals. The 1.0.33 behavior remains preserved in player-1.0.33.js. */
.hap-player .hap-touch-drag-ghost{
    position:fixed!important;z-index:2147483000!important;pointer-events:none!important;
    opacity:.56!important;margin:0!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:22px 23px minmax(0,1fr) auto!important;
    align-items:center!important;gap:5px!important;padding:2px 5px!important;
    min-height:38px!important;border-radius:7px!important;
    color:var(--hap-text)!important;background:var(--hap-active)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    box-shadow:0 12px 30px rgba(0,0,0,.38)!important;
    transition:none!important;-webkit-user-select:none!important;user-select:none!important;
}
.hap-player .hap-touch-drag-ghost.is-dropping{
    opacity:.72!important;
    transition:top 220ms cubic-bezier(.2,.72,.2,1),left 220ms cubic-bezier(.2,.72,.2,1),width 220ms cubic-bezier(.2,.72,.2,1),opacity 220ms ease!important;
}
.hap-player .hap-touch-drag-ghost .hap-track-button{pointer-events:none!important}
.hap-touch-drop-placeholder{
    box-sizing:border-box;display:block;width:100%;min-height:38px;
    border:1px dashed color-mix(in srgb,var(--hap-accent) 65%,transparent);
    background:color-mix(in srgb,var(--hap-active) 34%,transparent);
    border-radius:7px;
}
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
    .hap-touch-drop-placeholder{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.055)}
}


/* 1.0.35: safer iPhone/touch reordering. Desktop mouse behavior is unchanged. */
@media (pointer: coarse) {
  .hap-player.is-pro .hap-player-track-list,
  .hap-player.is-pro .hap-player-track-list .hap-track,
  .hap-player.is-pro .hap-player-track-list .hap-track * {
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
  }
  .hap-player.is-pro .hap-drag-handle {
    position:relative!important;
    touch-action:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
    padding:9px 6px!important;
    margin:-9px -4px!important;
  }
}


/* 1.0.37: isolate public-player checkboxes from theme checkbox styling.
   Some themes (including the ATIIC site theme) enlarge or redraw native
   checkboxes. These controls are intentionally self-contained. */
.hap-player .hap-repeat-label input[type="checkbox"],
.hap-player .hap-randomize-label input[type="checkbox"],
.hap-player .hap-stay-awake-label input[type="checkbox"],
.hap-player .hap-track-check input[type="checkbox"],
.hap-player .hap-live-lyrics-switch input[type="checkbox"]{
    -webkit-appearance:none!important;
    appearance:none!important;
    position:relative!important;
    display:inline-block!important;
    flex:0 0 16px!important;
    width:16px!important;
    min-width:16px!important;
    max-width:16px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    padding:0!important;
    margin:0!important;
    border:1.5px solid #8c8f94!important;
    border-radius:4px!important;
    background:#fff!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
    vertical-align:middle!important;
    cursor:pointer!important;
    box-sizing:border-box!important;
}
.hap-player .hap-repeat-label input[type="checkbox"]::before,
.hap-player .hap-repeat-label input[type="checkbox"]::after,
.hap-player .hap-randomize-label input[type="checkbox"]::before,
.hap-player .hap-randomize-label input[type="checkbox"]::after,
.hap-player .hap-stay-awake-label input[type="checkbox"]::before,
.hap-player .hap-stay-awake-label input[type="checkbox"]::after,
.hap-player .hap-track-check input[type="checkbox"]::before,
.hap-player .hap-track-check input[type="checkbox"]::after,
.hap-player .hap-live-lyrics-switch input[type="checkbox"]::before,
.hap-player .hap-live-lyrics-switch input[type="checkbox"]::after{
    content:none!important;
    display:none!important;
}
.hap-player .hap-repeat-label input[type="checkbox"]:checked,
.hap-player .hap-randomize-label input[type="checkbox"]:checked,
.hap-player .hap-stay-awake-label input[type="checkbox"]:checked,
.hap-player .hap-track-check input[type="checkbox"]:checked,
.hap-player .hap-live-lyrics-switch input[type="checkbox"]:checked{
    border-color:#0a84ff!important;
    background-color:#0a84ff!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.2 6.4 11.2 12.8 4.8'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:13px 13px!important;
}
.hap-player .hap-repeat-label input[type="checkbox"]:focus-visible,
.hap-player .hap-randomize-label input[type="checkbox"]:focus-visible,
.hap-player .hap-stay-awake-label input[type="checkbox"]:focus-visible,
.hap-player .hap-track-check input[type="checkbox"]:focus-visible,
.hap-player .hap-live-lyrics-switch input[type="checkbox"]:focus-visible{
    outline:2px solid #72aee6!important;
    outline-offset:2px!important;
}


/* 1.0.39: let Pro minimal layouts collapse to the actual enabled controls. */
.hap-player.is-pro .hap-player-bar{min-height:0!important}

/* 1.0.43: Live Lyrics. The track movement itself is synchronized in player JS;
   these styles keep the active line readable while surrounding lines taper away. */
.hap-player .hap-lyrics-content.is-live{
    position:relative!important;
    box-sizing:border-box!important;
    height:clamp(210px,34vh,340px)!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:0 14px!important;
    overscroll-behavior:contain;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 86%,transparent 100%);
}
.hap-player .hap-live-lyrics-track{
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    will-change:transform;
    transform:translate3d(0,0,0);
}
.hap-player .hap-live-lyrics-line{
    box-sizing:border-box;
    width:100%;
    padding:.42em .2em;
    color:var(--hap-muted);
    opacity:.34;
    font-size:var(--hap-live-lyrics-font,24px)!important;
    line-height:1.42;
    /* Reserve the active-line font metrics from the start. This keeps the exact
       same wrapping while the line changes from muted to visually bold. */
    font-weight:700;
    text-align:center;
    overflow-wrap:anywhere;
    transform:scale(.975);
    transform-origin:center center;
    transition:opacity .25s ease,color .25s ease,transform .32s ease,-webkit-text-stroke-color .25s ease,text-shadow .25s ease;
    -webkit-text-stroke:0 transparent;
    text-shadow:none;
}
.hap-player .hap-live-lyrics-line.is-active{
    color:var(--hap-text);
    opacity:1;
    /* Make the active line look heavier without changing glyph metrics or wrapping. */
    font-weight:700;
    -webkit-text-stroke:.28px currentColor;
    text-shadow:.22px 0 currentColor,-.22px 0 currentColor;
    transform:scale(1);
}
/* Formatting tags must not change line width after timing has been measured. */
.hap-player .hap-live-lyrics-line strong{font-weight:inherit}
.hap-player .hap-live-lyrics-line em{font-style:italic}
@media(max-width:640px){
    .hap-player .hap-lyrics-content.is-live{height:clamp(190px,31vh,285px)!important;padding-left:10px!important;padding-right:10px!important}
    .hap-player .hap-live-lyrics-line{line-height:1.36;padding:.38em .15em}
}
@media(prefers-reduced-motion:reduce){
    .hap-player .hap-live-lyrics-line{transition:none!important}
}

/* 1.0.44: visitor Live Lyrics mode switch. */
.hap-player .hap-lyrics-panel-head{align-items:flex-start;gap:14px}
.hap-player .hap-live-lyrics-switch{margin-left:auto;display:inline-flex;align-items:center;gap:7px;color:var(--hap-text);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;user-select:none}
.hap-player .hap-live-lyrics-switch input{margin:0;accent-color:var(--hap-accent);width:15px;height:15px}
@media(max-width:480px){.hap-player .hap-lyrics-panel-head{gap:8px}.hap-player .hap-live-lyrics-switch{font-size:11px}}

/* Precise Live Lyrics timing and instrumental countdown. */
/* 1.0.48: larger, intentional instrumental countdown dots. */
.hap-player .hap-live-lyrics-line.is-gap{
    letter-spacing:0;
    font-size:calc(var(--hap-live-lyrics-font,24px) * 1.6)!important;
    font-weight:700;
    transform:none;
    white-space:nowrap;
}
.hap-player .hap-live-lyrics-line.is-gap .hap-live-gap-dot{
    display:inline-block;
    box-sizing:border-box;
    width:.80em;
    height:.80em;
    min-width:28px;
    min-height:28px;
    max-width:44px;
    max-height:44px;
    margin:0 .28em;
    border-radius:999px;
    background:var(--hap-text);
    color:transparent;
    font-size:0;
    line-height:0;
    opacity:0;
    transform:scale(.72);
    transition:opacity .16s linear,transform .16s ease;
}
.hap-player .hap-live-lyrics-line.is-gap.is-active{opacity:1;transform:none;-webkit-text-stroke:0 transparent;text-shadow:none}


/* 1.0.75: opening Live Lyrics metadata. Shown only with the opening silence
   countdown when there is no untimed lyric text before the first timed line. */
.hap-player .hap-live-lyrics-intro{
    position:absolute;
    left:16px;
    right:16px;
    top:6px;
    z-index:3;
    text-align:center;
    pointer-events:none;
    opacity:0;
    transform:translateY(-7px);
    transition:opacity .58s ease,transform .58s ease;
}
.hap-player .hap-live-lyrics-intro.is-visible{opacity:1;transform:translateY(0)}
/* While the opening metadata is visible, do not fade the top edge of the
   Live Lyrics viewport. The metadata intentionally hugs the top with only a
   few pixels of breathing room; keep the normal bottom fade. */
.hap-player .hap-lyrics-content.is-live.has-intro{
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
}
.hap-player .hap-live-lyrics-intro-title{
    color:var(--hap-text);
    font-size:calc(var(--hap-live-lyrics-font,24px) * 1.18);
    line-height:1.18;
    font-weight:800;
    overflow-wrap:anywhere;
}
.hap-player .hap-live-lyrics-intro-album,
.hap-player .hap-live-lyrics-intro-artist{
    margin-top:.34em;
    color:var(--hap-muted);
    font-size:calc(var(--hap-live-lyrics-font,24px) * .66);
    line-height:1.25;
    font-weight:600;
    overflow-wrap:anywhere;
}
.hap-player .hap-live-lyrics-intro-artist{margin-top:.20em;opacity:.92}
@media(max-width:640px){.hap-player .hap-live-lyrics-intro{left:12px;right:12px;top:6px}.hap-player .hap-live-lyrics-intro-title{font-size:calc(var(--hap-live-lyrics-font,24px) * 1.10)}}
@media(prefers-reduced-motion:reduce){.hap-player .hap-live-lyrics-intro{transition:none!important}}


/* 1.0.51: Live Lyrics closing credit after the final sung line. */
.hap-player .hap-live-lyrics-track{transition:opacity .45s ease}
.hap-player .hap-lyrics-content.is-live.has-credit .hap-live-lyrics-track{opacity:.08}
.hap-player .hap-live-lyrics-credit{
    position:absolute;
    left:14px;
    right:14px;
    top:50%;
    transform:translateY(calc(-50% + 8px));
    text-align:center;
    pointer-events:none;
    opacity:0;
    transition:opacity 1s ease,transform 1s ease;
}
.hap-player .hap-live-lyrics-credit.is-visible{
    opacity:1;
    transform:translateY(-50%);
}
.hap-player .hap-live-lyrics-credit-artist{
    color:var(--hap-text);
    font-size:calc(var(--hap-live-lyrics-font,24px) * .74);
    line-height:1.35;
    font-weight:700;
}
.hap-player .hap-live-lyrics-credit-album{
    margin-top:.34em;
    color:var(--hap-text);
    opacity:.82;
    font-size:calc(var(--hap-live-lyrics-font,24px) * .58);
    line-height:1.35;
    font-weight:550;
}
.hap-player .hap-live-lyrics-credit-playlist{
    margin-top:.30em;
    color:var(--hap-muted);
    font-size:calc(var(--hap-live-lyrics-font,24px) * .50);
    line-height:1.35;
    font-weight:500;
}

/* 1.0.54 Pro visual media: looping video shares the artwork shell. */
.hap-player .hap-artwork-inner .hap-artwork-video,.hap-player .hap-artwork-inner .hap-artwork-image{display:block;width:100%;height:auto;box-sizing:border-box}
.hap-player .hap-artwork-inner .hap-artwork-video{object-fit:cover;background:#000}
.hap-player .hap-artwork-inner [hidden]{display:none!important}
.hap-player .hap-artwork-inner .hap-artwork-video{
    width:100%!important;max-width:100%!important;max-height:none!important;height:auto!important;object-fit:cover!important;box-sizing:border-box!important;border:var(--hap-artwork-border-width,0px) solid var(--hap-artwork-border-color,#000)!important;background:#000!important;
}

/* 1.0.57 Stop control, overlapping Live Lyrics highlights, and large-control fitting. */
.hap-player .hap-stop[hidden]{display:none!important}
.hap-player .hap-auto-hidden{display:none!important}
.hap-player.hap-large-buttons .hap-player-bar button:not(.hap-time-toggle){width:var(--hap-btn-fit,var(--hap-btn))!important;height:var(--hap-btn-fit,var(--hap-btn))!important;min-width:var(--hap-btn-fit,var(--hap-btn))!important;min-height:var(--hap-btn-fit,var(--hap-btn))!important}
.hap-player.hap-large-buttons .hap-player-bar button .hap-icon{width:clamp(18px,calc(var(--hap-btn-fit,var(--hap-btn)) * .55),58px)!important;height:clamp(18px,calc(var(--hap-btn-fit,var(--hap-btn)) * .55),58px)!important}
.hap-player.hap-large-buttons .hap-player-bar .hap-play .hap-icon{width:clamp(20px,calc(var(--hap-btn-fit,var(--hap-btn)) * .62),64px)!important;height:clamp(20px,calc(var(--hap-btn-fit,var(--hap-btn)) * .62),64px)!important}

/* 1.0.61: visitor Stay awake control uses the same compact blue checkbox style. */
.hap-player .hap-stay-awake-label{display:inline-flex!important;align-items:center!important;gap:7px!important;margin:0!important;color:var(--hap-muted)!important;font:inherit!important;font-size:12px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hap-player .hap-stay-awake-label input:disabled{opacity:.45!important;cursor:not-allowed!important}
.hap-player .hap-stay-awake-label:has(input:checked){color:var(--hap-text)!important}
.hap-player .hap-playlist-mode-controls{flex-wrap:wrap}
@media(max-width:480px){.hap-player .hap-stay-awake-label{font-size:11px!important;gap:5px!important}}

/* 1.0.63 optional Pro MAX app view. The control is intentionally quiet and
   appears only after visitor interaction, then fades away after four seconds. */
.hap-artwork-inner{position:relative}
.hap-maximize-toggle{
    position:absolute!important;left:50%!important;bottom:7px!important;transform:translateX(-50%)!important;
    z-index:8!important;margin:0!important;padding:4px 9px!important;min-width:0!important;width:auto!important;height:auto!important;
    border:1px solid rgba(255,255,255,.24)!important;border-radius:4px!important;background:rgba(20,20,20,.56)!important;
    color:rgba(235,235,235,.88)!important;font:600 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    letter-spacing:.08em!important;box-shadow:none!important;opacity:0!important;pointer-events:none!important;
    transition:opacity .28s ease,background-color .2s ease!important;-webkit-tap-highlight-color:transparent!important;
}
.hap-maximize-toggle.is-available.is-visible,.hap-maximize-toggle:focus-visible{opacity:1!important;pointer-events:auto!important}
.hap-maximize-toggle:hover,.hap-maximize-toggle:focus-visible{background:rgba(20,20,20,.76)!important;outline:1px solid rgba(255,255,255,.45)!important;outline-offset:1px!important}
html.hap-player-max-open,body.hap-player-max-open{overflow:hidden!important;overscroll-behavior:none!important;background:#000!important}
html.hap-player-max-open{color-scheme:dark!important}
.hap-player.is-maximized{
    position:fixed!important;inset:0!important;z-index:2147483000!important;
    display:flex!important;flex-direction:column!important;width:100vw!important;max-width:none!important;
    height:100vh!important;height:100dvh!important;min-height:100vh!important;margin:0!important;padding:0!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--hap-panel)!important;overflow:hidden!important;
}
.hap-player.is-maximized .hap-artwork-shell{
    flex:0 0 auto!important;display:grid!important;grid-template-rows:1fr!important;opacity:1!important;
    border-radius:0!important;box-shadow:none!important;overflow:hidden!important;background:#000!important;
}
.hap-player.is-maximized .hap-artwork-inner{height:min(46dvh,100vw)!important;max-height:46dvh!important;background:#000!important;overflow:hidden!important}
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-image,
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-video{
    width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important;object-position:center center!important;background:#000!important;border-radius:0!important;
}
.hap-player.is-maximized .hap-player-bar{flex:0 0 auto!important;border-radius:0!important;box-shadow:none!important}
.hap-player.is-maximized>.hap-player-panel:not([hidden]){flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;border-radius:0!important;box-shadow:none!important}
.hap-player.is-maximized>.hap-lyrics-panel:not([hidden]){display:flex!important;flex-direction:column!important;overflow:hidden!important}
.hap-player.is-maximized .hap-lyrics-panel .hap-panel-head{flex:0 0 auto!important}
.hap-player.is-maximized .hap-lyrics-content{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
.hap-player.is-maximized .hap-lyrics-content.is-live{height:auto!important;min-height:0!important;max-height:none!important}
.hap-player.is-maximized .hap-artwork-toggle{display:none!important}
@supports(padding:max(0px)){.hap-player.is-maximized>.hap-player-panel:not([hidden]){padding-bottom:max(var(--hap-py),env(safe-area-inset-bottom))!important}}

/* 1.0.64: MAX visual fills edge-to-edge; page/theme background blends with the player where browser chrome allows. */


/* 1.0.65: preserve playback buttons before sacrificing the seek timeline.
   On a crowded control row the timeline first compresses to a tiny indicator;
   if that is still not enough, JS hides it before any button is removed. */
.hap-player.hap-progress-condensed .hap-seek{
    flex:0 1 44px!important;
    width:44px!important;
    min-width:20px!important;
    max-width:44px!important;
}


/* 1.0.66: harden MAX mode against iOS Safari visual-viewport offsets/panning. */
.hap-player.is-maximized{
    inset:auto!important;
    left:var(--hap-max-left,0px)!important;
    top:var(--hap-max-top,0px)!important;
    right:auto!important;
    bottom:auto!important;
    width:var(--hap-max-width,100vw)!important;
    min-width:var(--hap-max-width,100vw)!important;
    max-width:var(--hap-max-width,100vw)!important;
    height:var(--hap-max-height,100dvh)!important;
    min-height:var(--hap-max-height,100dvh)!important;
    max-height:var(--hap-max-height,100dvh)!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    box-sizing:border-box!important;
}
.hap-player.is-maximized .hap-artwork-shell,
.hap-player.is-maximized .hap-artwork-inner{
    width:100%!important;max-width:none!important;margin:0!important;padding-left:0!important;padding-right:0!important;transform:none!important;box-sizing:border-box!important;
}
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-image,
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-video{
    display:block!important;width:100%!important;min-width:100%!important;max-width:none!important;margin:0!important;transform:none!important;object-position:center center!important;
}


/* 1.0.68: iPhone MAX polish. Preserve the top of square artwork when cover
   cropping is required and keep a small dark separation below Safari chrome. */
.hap-player.is-maximized .hap-artwork-shell{
    border-top:6px solid #000!important;
}
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-image,
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-video{
    object-position:center top!important;
}

/* 1.0.110: black safe-area behind the status region in the fixed MAX view. */
.hap-player.is-maximized{padding-top:env(safe-area-inset-top,0px)!important;background:#000!important}
.hap-player.is-maximized::backdrop{background:#000}


/* 1.0.77 Step 2: tracks with no lyrics use the Live Lyrics viewport for
   centered song information. No instrumental timing dots are created. */
.hap-player .hap-lyrics-content.is-live.is-no-lyrics{
    -webkit-mask-image:none!important;
    mask-image:none!important;
}
.hap-player .hap-live-lyrics-empty-meta{
    position:absolute;
    left:16px;
    right:16px;
    top:50%;
    transform:translateY(calc(-50% + 8px));
    z-index:3;
    text-align:center;
    pointer-events:none;
    opacity:0;
    transition:opacity .95s ease,transform .95s ease;
}
.hap-player .hap-live-lyrics-empty-meta.is-visible{
    opacity:1;
    transform:translateY(-50%);
}
.hap-player .hap-live-lyrics-empty-title{
    color:var(--hap-text);
    font-size:calc(var(--hap-live-lyrics-font,24px) * 1.18);
    line-height:1.18;
    font-weight:800;
    overflow-wrap:anywhere;
}
.hap-player .hap-live-lyrics-empty-album,
.hap-player .hap-live-lyrics-empty-artist{
    margin-top:.38em;
    color:var(--hap-muted);
    font-size:calc(var(--hap-live-lyrics-font,24px) * .68);
    line-height:1.3;
    font-weight:600;
    overflow-wrap:anywhere;
}
.hap-player .hap-live-lyrics-empty-artist{margin-top:.22em;opacity:.92}
@media(max-width:640px){
    .hap-player .hap-live-lyrics-empty-meta{left:12px;right:12px}
    .hap-player .hap-live-lyrics-empty-title{font-size:calc(var(--hap-live-lyrics-font,24px) * 1.10)}
}
@media(prefers-reduced-motion:reduce){.hap-player .hap-live-lyrics-empty-meta{transition:none!important}}


/* 1.0.81: suppress real or pseudo loading indicators injected by themes around
   the player/artwork shell. Audio Player has no front-end loader in these areas. */
.hap-player .hap-artwork-shell::before,
.hap-player .hap-artwork-shell::after,
.hap-player .hap-artwork-inner::before,
.hap-player .hap-artwork-inner::after,
.hap-player .hap-player-panel::before,
.hap-player .hap-player-panel::after{
    content:none!important;display:none!important;visibility:hidden!important;opacity:0!important;animation:none!important;
}
.hap-player .tf_loader,
.hap-player .tf-loader,
.hap-player .tb_loader,
.hap-player .tb-loader,
.hap-player .themify_loader,
.hap-player .themify-loader,
.hap-player .themify_builder_loader,
.hap-player .themify-builder-loader,
.hap-player [class~="loader"],
.hap-player [class~="loading"]{
    display:none!important;visibility:hidden!important;opacity:0!important;animation:none!important;
}

/* 1.0.82: looping artwork video is decorative, never an interactive media player.
   A permanent transparent layer sits above every artwork visual so iOS/Safari taps,
   drags, long-presses, and accidental gestures cannot reach the native <video>.
   MAX remains above this layer. Normal vertical page scrolling is still allowed. */
.hap-player .hap-artwork-inner .hap-artwork-video{
    pointer-events:none!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
}
.hap-player .hap-artwork-inner .hap-artwork-interaction-shield{
    position:absolute!important;
    inset:0!important;
    z-index:6!important;
    display:block!important;
    background:transparent!important;
    pointer-events:auto!important;
    touch-action:pan-y pinch-zoom!important;
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
}
.hap-player .hap-artwork-inner .hap-maximize-toggle{z-index:8!important}
.hap-player .hap-artwork-video::-webkit-media-controls,
.hap-player .hap-artwork-video::-webkit-media-controls-enclosure,
.hap-player .hap-artwork-video::-webkit-media-controls-panel,
.hap-player .hap-artwork-video::-webkit-media-controls-play-button,
.hap-player .hap-artwork-video::-webkit-media-controls-timeline,
.hap-player .hap-artwork-video::-webkit-media-controls-current-time-display,
.hap-player .hap-artwork-video::-webkit-media-controls-time-remaining-display,
.hap-player .hap-artwork-video::-webkit-media-controls-fullscreen-button,
.hap-player .hap-artwork-video::-webkit-media-controls-overlay-play-button,
.hap-player .hap-artwork-video::-webkit-media-controls-picture-in-picture-button{
    display:none!important;
    -webkit-appearance:none!important;
    opacity:0!important;
    pointer-events:none!important;
}


/* 1.0.84: hard decorative-video isolation, scroll-through shield, and docked MAX control.
   The entire visual surface is intentionally non-interactive; MAX lives in the
   playlist options row so native iOS media chrome can never cover the button. */
.hap-player .hap-artwork-inner{isolation:isolate!important}
.hap-player .hap-artwork-inner .hap-artwork-video{
    position:relative!important;z-index:1!important;pointer-events:none!important;
    -webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;
}
/* 1.0.111: clip the decorative media layer at its artwork edge and cover only
   the small top-center region where unwanted dots have been visible in MAX. */
.hap-player .hap-artwork-shell,
.hap-player .hap-artwork-inner{-webkit-clip-path:inset(0)!important;clip-path:inset(0)!important}
.hap-player>.hap-artwork-edge-mask{display:none!important}
.hap-player.is-maximized>.hap-artwork-edge-mask{
    position:absolute!important;left:50%!important;top:calc(env(safe-area-inset-top,0px) - 2px)!important;transform:translateX(-50%)!important;
    width:56px!important;height:16px!important;z-index:214748301!important;
    display:block!important;background:#000!important;border:0!important;
    margin:0!important;padding:0!important;pointer-events:none!important;animation:none!important;box-shadow:none!important;
}
.hap-player .hap-artwork-interaction-shield::before,
.hap-player .hap-artwork-interaction-shield::after,
.hap-player>.hap-artwork-edge-mask::before,
.hap-player>.hap-artwork-edge-mask::after{content:none!important;display:none!important;animation:none!important}
.hap-player .hap-artwork-inner .hap-artwork-image{position:relative!important;z-index:2!important;pointer-events:none!important}
.hap-player .hap-artwork-inner .hap-artwork-interaction-shield{
    position:absolute!important;inset:0!important;z-index:214748300!important;display:block!important;
    background:rgba(0,0,0,0)!important;pointer-events:auto!important;touch-action:pan-y pinch-zoom!important;
    -webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;
}
.hap-player .hap-playlist-options .hap-maximize-docked{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;grid-column:1!important;justify-self:start!important;align-self:center!important;
    margin:0!important;padding:4px 9px!important;min-width:0!important;width:auto!important;height:auto!important;
    border:1px solid rgba(255,255,255,.24)!important;border-radius:4px!important;background:rgba(20,20,20,.56)!important;
    color:rgba(235,235,235,.88)!important;font:600 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    letter-spacing:.08em!important;box-shadow:none!important;transition:background-color .2s ease!important;
    -webkit-tap-highlight-color:transparent!important;
}
.hap-player .hap-playlist-options .hap-maximize-docked.is-available{opacity:1!important;pointer-events:auto!important}
.hap-player .hap-playlist-options .hap-maximize-docked:not(.is-available){opacity:.35!important;pointer-events:none!important}
.hap-player .hap-playlist-options .hap-maximize-docked:hover,.hap-player .hap-playlist-options .hap-maximize-docked:focus-visible{
    background:rgba(20,20,20,.76)!important;outline:1px solid rgba(255,255,255,.45)!important;outline-offset:1px!important;
}
@media(max-width:480px){.hap-player .hap-playlist-options .hap-maximize-docked{padding:4px 7px!important;font-size:9px!important}}

/* 1.0.86: MAX lives in the right side of each lower-panel header. The control is
   deliberately always visible when MAX is available, and never sits over artwork. */
.hap-player .hap-panel-head .hap-maximize-panel{
    position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;margin:0!important;padding:4px 9px!important;min-width:0!important;width:auto!important;height:auto!important;
    flex:0 0 auto!important;border:1px solid rgba(255,255,255,.24)!important;border-radius:4px!important;
    background:rgba(20,20,20,.56)!important;color:rgba(235,235,235,.88)!important;
    font:600 10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;letter-spacing:.08em!important;
    box-shadow:none!important;opacity:.35!important;pointer-events:none!important;-webkit-tap-highlight-color:transparent!important;
}
.hap-player .hap-panel-head .hap-maximize-panel.is-available{opacity:1!important;pointer-events:auto!important}
.hap-player .hap-panel-head .hap-maximize-panel:hover,.hap-player .hap-panel-head .hap-maximize-panel:focus-visible{background:rgba(20,20,20,.76)!important;outline:1px solid rgba(255,255,255,.45)!important;outline-offset:1px!important}
.hap-player .hap-lyrics-head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important;margin-left:auto!important;min-width:0!important}
.hap-player .hap-lyrics-head-actions .hap-live-lyrics-switch{margin:0!important}
@media(max-width:480px){.hap-player .hap-panel-head .hap-maximize-panel{padding:4px 7px!important;font-size:9px!important}.hap-player .hap-lyrics-head-actions{gap:7px!important}}

/* A collapsed artwork shell must not leave an iOS native-video compositing layer
   alive at the top edge of the player. The video can keep its source buffered, but
   the visual element is fully removed from layout/compositing until artwork opens. */
.hap-player .hap-artwork-shell:not(.is-open) .hap-artwork-video{
    display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
}

/* 1.0.90: MAX is a portrait/mobile app view only. Wide or landscape viewports hide it. */
.hap-player .hap-maximize-toggle.hap-max-hidden{display:none!important}
.hap-player .hap-pro-track-extras{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:5px 7px 7px;border-bottom:1px solid var(--hap-line);min-height:18px}
.hap-player .hap-pro-track-extras[hidden]{display:none!important}
.hap-player .hap-track-download{appearance:none;text-decoration:none;border:1px solid rgba(255,255,255,.24);border-radius:4px;padding:3px 7px;color:var(--hap-text);font:700 9px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.06em;background:rgba(20,20,20,.42)}
.hap-player .hap-track-download:hover,.hap-player .hap-track-download:focus-visible{background:rgba(255,255,255,.12);outline:1px solid rgba(255,255,255,.45)}
.hap-player .hap-track-bpm{color:var(--hap-muted);font-size:10px;font-weight:700;white-space:nowrap}
@media (min-width:900px){.hap-player .hap-maximize-toggle{display:none!important}}
@media (orientation:landscape){.hap-player .hap-maximize-toggle{display:none!important}}


/* 1.0.91: gently distinguish two-line playlist rows without overpowering the dark player. */
.hap-player .hap-track{
    background:rgba(255,246,190,.045);
    border-color:rgba(255,238,145,.045);
}
.hap-player .hap-track:hover{background:rgba(255,246,190,.075)}
.hap-player .hap-track.is-active{
    background:rgba(255,246,190,.105);
    border-color:rgba(255,238,145,.16);
}

/* Keep Pro Download/BPM on the copyright/artist metadata line, not a new row. */
.hap-player .hap-panel-head>.hap-panel-copy{flex:1 1 auto;min-width:0}
.hap-player .hap-panel-meta-line{display:flex;align-items:center;gap:10px;min-width:0;margin-top:2px}
.hap-player .hap-panel-meta-line>small{flex:1 1 auto;min-width:0;margin-top:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hap-player .hap-panel-meta-line .hap-pro-track-extras{
    flex:0 0 auto;display:flex;align-items:center;justify-content:flex-end;gap:8px;
    padding:0!important;border:0!important;min-height:0!important;margin-left:auto;
}
.hap-player .hap-panel-meta-line .hap-pro-track-extras[hidden]{display:none!important}
@media(max-width:420px){
    .hap-player .hap-panel-meta-line{gap:6px}
    .hap-player .hap-panel-meta-line .hap-track-download{padding:2px 5px;font-size:8px}
    .hap-player .hap-panel-meta-line .hap-track-bpm{font-size:9px}
}

/* When artwork is collapsed, leave no media descendants available for browser/theme loaders. */
.hap-player .hap-artwork-shell:not(.is-open) .hap-artwork-image,
.hap-player .hap-artwork-shell:not(.is-open) picture,
.hap-player .hap-artwork-shell:not(.is-open) source{
    visibility:hidden!important;opacity:0!important;pointer-events:none!important;
}

/* 1.0.92: visually join an open lower panel to the transport bar.
   The panel extends halfway behind the bar so its background fills the area
   beneath the bar's rounded lower corners instead of exposing page background.
   The bar remains above the panel and panel content stays in the same place. */
.hap-player:not(.is-maximized) > .hap-player-bar{
    position:relative!important;
    z-index:3!important;
}
.hap-player:not(.is-maximized) > .hap-player-panel:not([hidden]){
    --hap-panel-underlap:25px;
    position:relative!important;
    z-index:2!important;
    margin-top:calc(-1 * var(--hap-panel-underlap))!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-top:calc(var(--hap-panel-underlap) + 2px)!important;
}
@media(max-width:640px){
    .hap-player:not(.is-maximized) > .hap-player-panel:not([hidden]){
        --hap-panel-underlap:24px;
        padding-top:var(--hap-panel-underlap)!important;
    }
}


/* 1.0.93: pin Pro Download/BPM to the far right of the metadata row.
   Keep the copyright/artist copy on the left and let it truncate before the actions. */
.hap-player .hap-panel-head{position:relative}
.hap-player .hap-panel-meta-line{position:relative;width:100%}
.hap-player .hap-panel-meta-line>small{padding-right:170px;box-sizing:border-box}
.hap-player .hap-panel-meta-line .hap-pro-track-extras{
    position:absolute!important;right:0;top:50%;transform:translateY(-50%);
    margin-left:0!important;justify-content:flex-end!important;
}
@media(max-width:420px){
    .hap-player .hap-panel-meta-line>small{padding-right:145px}
}


/* 1.0.94: align Pro Download/BPM against the true right edge of the lower-panel header.
   The extras are positioned relative to the full header instead of the narrower copy column. */
.hap-player .hap-panel-head{position:relative!important}
.hap-player .hap-panel-meta-line{position:static!important}
.hap-player .hap-panel-meta-line .hap-pro-track-extras{
    position:absolute!important;
    right:6px!important;
    bottom:9px!important;
    top:auto!important;
    transform:none!important;
    margin:0!important;
    justify-content:flex-end!important;
}
@media(max-width:640px){
    .hap-player .hap-panel-meta-line .hap-pro-track-extras{right:4px!important;bottom:8px!important}
}

/* 1.0.95: lower-panel metadata gets the full second row so artist/copyright text
   does not truncate merely because Live Lyrics/MAX occupy the first row. */
.hap-player .hap-panel-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:2px!important;
    align-items:center!important;
}
.hap-player .hap-panel-head>.hap-panel-copy{display:contents!important}
.hap-player .hap-panel-head>.hap-panel-copy>strong{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
}
.hap-player .hap-panel-head>.hap-maximize-panel{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
}
.hap-player .hap-panel-head>.hap-lyrics-head-actions{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
}
.hap-player .hap-panel-head .hap-panel-meta-line{
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    position:static!important;
    width:100%!important;
    min-width:0!important;
    margin-top:3px!important;
}
.hap-player .hap-panel-head .hap-panel-meta-line>small{
    min-width:0!important;
    width:auto!important;
    padding-right:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}
.hap-player .hap-panel-head .hap-panel-meta-line .hap-pro-track-extras{
    position:static!important;
    right:auto!important;
    bottom:auto!important;
    top:auto!important;
    transform:none!important;
    grid-column:2!important;
    justify-self:end!important;
    margin:0!important;
}

/* MAX mode must respect the actual hidden state of still/video artwork. Earlier
   MAX sizing rules were more specific than [hidden], which could put the still
   image back on top of a playing video only after entering MAX. */
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-image[hidden],
.hap-player.is-maximized .hap-artwork-inner .hap-artwork-video[hidden]{
    display:none!important;
}

/* Prevent Safari's double-tap-to-zoom gesture inside the player without disabling
   pinch zoom for the surrounding site or ordinary vertical page scrolling. */
.hap-player,
.hap-player button,
.hap-player a,
.hap-player label,
.hap-player .hap-player-panel,
.hap-player .hap-panel-head,
.hap-player .hap-track{
    touch-action:manipulation;
}
.hap-player .hap-artwork-inner .hap-artwork-interaction-shield{
    touch-action:pan-y pinch-zoom!important;
}


/* 1.0.96: structural lyric labels display without editor brackets and are not
   treated like sung/highlighted lyric lines. */
.hap-player .hap-live-lyrics-line.is-section{
    color:var(--hap-muted)!important;
    font-size:calc(var(--hap-live-lyrics-font,24px) * .68)!important;
    line-height:1.25!important;
    font-weight:700!important;
    letter-spacing:.04em!important;
    opacity:.72!important;
}

/* 1.0.96: complete closing credits. */
.hap-player .hap-live-lyrics-credit-title{
    color:var(--hap-text);
    font-size:calc(var(--hap-live-lyrics-font,24px) * .92);
    line-height:1.22;
    font-weight:800;
    overflow-wrap:anywhere;
}
.hap-player .hap-live-lyrics-credit-title + .hap-live-lyrics-credit-album{
    margin-top:.42em;
}
.hap-player .hap-live-lyrics-credit-album + .hap-live-lyrics-credit-artist,
.hap-player .hap-live-lyrics-credit-title + .hap-live-lyrics-credit-artist{
    margin-top:.32em;
}

/* Let Pro cross-fade the still artwork cleanly above its preloaded decorative video. */
.hap-player .hap-artwork-inner .hap-artwork-image{
    will-change:opacity;
}

/* 1.0.103: iOS touch polish. Long-pressing anywhere inside the public player
   should operate the player, not start Safari text selection or a touch callout. */
.hap-player,
.hap-player *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
}
.hap-player button,
.hap-player [role="button"],
.hap-player input,
.hap-player label{
    -webkit-tap-highlight-color:transparent!important;
}

/* 1.0.108: retain the compact three-dot row with exactly 4px of padding
   above and below, without inheriting the lyric line-height. */
.hap-player .hap-live-lyrics-line.is-gap{
    padding:4px .2em!important;
    line-height:0!important;
    margin:0!important;
    min-height:0!important;
}
.hap-player .hap-live-lyrics-line.is-gap .hap-live-gap-dot{
    vertical-align:middle!important;
}