body.has-topup-music { padding-bottom: 88px; }
.topup-music {
    position: fixed; z-index: 950; left: 18px; bottom: max(16px, env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 36px);
    padding: 8px 14px 8px 8px; border: 1px solid #c7d9f4; border-radius: 18px;
    background: #fff; color: #24599d; box-shadow: 0 4px 18px #2d549620;
    font-family: Kanit, "Noto Sans Thai", sans-serif;
}
.topup-music .topup-music-toggle {
    display: flex; align-items: center; gap: 9px; padding: 0; border: 0; border-radius: 10px;
    background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
    min-height: 44px; min-width: 162px; line-height: 1.35; box-shadow: none;
}
.topup-music-toggle small { display: block; color: #7d91b4; font-size: 10px; letter-spacing: .07em; }
#topup-music-label { display: block; font-size: 14px; font-weight: 500; }
.topup-music-note {
    display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 12px; background: #edf4ff; font-size: 23px;
}
.topup-music[data-state="playing"] .topup-music-note { color: #fff; background: #3277dc; }
.topup-music[data-state="off"] { color: #70819b; }
.topup-music .topup-music-volume { display: flex; align-items: center; margin: 0; }
.topup-music input[type="range"] {
    appearance: auto; width: 64px; min-width: 0; height: 32px; padding: 0; margin: 0;
    border: 0; background: transparent; accent-color: #3277dc; cursor: pointer; box-shadow: none;
}
.topup-music button:focus-visible, .topup-music input:focus-visible { outline: 3px solid #87b6ff; outline-offset: 3px; }
.topup-music-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 480px) {
    .topup-music { left: 12px; gap: 8px; max-width: calc(100vw - 24px); }
    .topup-music .topup-music-toggle { min-width: 154px; }
    .topup-music input[type="range"] { width: 54px; }
}