.profile-music-player[hidden],.profile-music-editor [hidden]{display:none!important}
.profile-music-actions { display: flex; align-items: center; gap: 8px; }
.profile-music-actions #profile-music-save { min-height: 44px; }
#profile-music-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #ffffff20;
  border-radius: 10px;
  background: #ffffff06;
  color: #bcbcc4;
  box-shadow: none;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
#profile-music-remove:hover:not(:disabled) { color: #f0a6ae; background: #d65b6812; border-color: #d65b6840; }
#profile-music-remove:focus-visible { outline: 2px solid #eee; outline-offset: 3px; }
#profile-music-remove:disabled { opacity: .5; cursor: not-allowed; }
#profile-music-save {
  background: #303034;
  color: #f5f5f5;
  border: 1px solid #ffffff20;
  border-radius: 10px;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}
#profile-music-save:hover:not(:disabled) { background: #3c3c41; border-color: #ffffff38; box-shadow: none; transform: none; }
#profile-music-save:active:not(:disabled) { background: #28282c; }
#profile-music-save:focus-visible { outline: 2px solid #eee; outline-offset: 3px; }
#profile-music-save:disabled { opacity: .5; cursor: not-allowed; }
body.profile-page #profile-edit-modal .profile-music-editor-heading .profile-premium-mini{position:static;font-size:8px;margin-left:auto;flex-shrink:0}
.profile-music-player{grid-column:1/-1;display:flex;align-items:center;gap:18px;width:100%;min-width:0;margin:18px 0 6px;padding:18px;border:1px solid #ffffff13;border-radius:18px;background:linear-gradient(125deg,#191923f2,#111119f5);box-shadow:0 10px 32px #0002;color:#f5f3fa;text-align:left;box-sizing:border-box}
.profile-music-art{width:100px;height:100px;flex-shrink:0;object-fit:cover;border-radius:12px;background:#272531}
.profile-music-body{min-width:0;flex:1}.profile-music-kicker{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:1.4px;color:#bcb6ca;margin-bottom:7px}.profile-music-kicker span{font-size:8px;letter-spacing:.7px;color:#e8c982;border:1px solid #e8c98230;padding:3px 5px;border-radius:5px}
#profile-music-name{display:block;font-size:16px;overflow-wrap:anywhere}#profile-music-artist{display:block;margin-top:3px;overflow-wrap:anywhere}.profile-music-muted{font-size:12px;line-height:1.5;color:#aaa5ba}.profile-music-controls{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:10px;font-variant-numeric:tabular-nums}.profile-music-controls button{width:34px;height:34px;flex-shrink:0;border:0;border-radius:50%;background:#eee9fa;color:#211b30;cursor:pointer;font-size:14px}.profile-music-controls button:disabled{opacity:.5;cursor:wait}.profile-music-controls input{flex:1;min-width:30px;width:100%}.profile-music-controls>span{min-width:28px;flex-shrink:0;color:#bcb7ca;text-align:center}.profile-music-volume{display:flex;align-items:center;gap:10px;margin-top:4px;color:#aaa5ba;font-size:10px}.profile-music-volume input{width:100px}.profile-music-volume output{min-width:30px;font-variant-numeric:tabular-nums}.profile-music-player button:focus-visible{outline:2px solid #baa1ee;outline-offset:3px}

/* The audio state drives the icon transition, including keyboard activation. */
#profile-music-play {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 36px;
  isolation: isolate;
  border: 1px solid #ffffff55;
  background: linear-gradient(145deg, #fff, #dfd2f7);
  color: #322342;
  box-shadow: 0 3px 10px #0003, inset 0 1px 0 #fff;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#profile-music-play::before {
  content: '';
  position: absolute;
  inset: -4px;
  z-index: -1;
  border: 1px solid #cbb2ff80;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.85);
  pointer-events: none;
}
#profile-music-play svg {
  position: absolute;
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
  transition: opacity .18s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
#profile-music-play .profile-music-play-icon { opacity: 1; transform: translateX(-1px) scale(1) rotate(0); }
#profile-music-play .profile-music-pause-icon { opacity: 0; transform: scale(.55) rotate(-45deg); }
#profile-music-play[aria-pressed="true"] { background: linear-gradient(145deg, #edddff, #c3a1ed); box-shadow: 0 3px 12px #0003, 0 0 16px #bba1ef25; }
#profile-music-play[aria-pressed="true"]::before { animation: profile-music-playing-ring 2.6s ease-out infinite; }
#profile-music-play[aria-pressed="true"] .profile-music-play-icon { opacity: 0; transform: translateX(-1px) scale(.55) rotate(45deg); }
#profile-music-play[aria-pressed="true"] .profile-music-pause-icon { opacity: 1; transform: scale(1) rotate(0); }
@media (hover: hover) {
  #profile-music-play:hover { transform: translateY(-1px) scale(1.06); box-shadow: 0 5px 16px #0004, 0 0 18px #cbb2ff35; }
}
#profile-music-play:active { transform: scale(.9); box-shadow: 0 1px 4px #0003; }
#profile-music-play:focus-visible { outline: 2px solid #e4ccff; outline-offset: 5px; }
@keyframes profile-music-playing-ring {
  0% { opacity: .55; transform: scale(.88); }
  75%, 100% { opacity: 0; transform: scale(1.18); }
}
@media (pointer: coarse) {
  #profile-music-play { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #profile-music-play, #profile-music-play svg { transition: none; }
  #profile-music-play[aria-pressed="true"]::before { animation: none; opacity: .4; transform: none; }
  #profile-music-play:is(:hover, :active) { transform: none; }
}

/* Keep a generous hit area while drawing only a slim, rounded rail. */
#profile-music-player input[type="range"] {
  --range-fill: 0%;
  --range-color: #bba1ef;
  --range-rail: #ffffff1c;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  box-sizing: border-box;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
#profile-music-player input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--range-color) 0%, var(--range-color) var(--range-fill), var(--range-rail) var(--range-fill), var(--range-rail) 100%);
}
#profile-music-player input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--range-color) 0%, var(--range-color) var(--range-fill), var(--range-rail) var(--range-fill), var(--range-rail) 100%);
}
#profile-music-player input[type="range"]::-moz-range-progress { background: transparent; }
#profile-music-player input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 2px solid #e8ddff;
  border-radius: 50%;
  background: #c7aff4;
  box-shadow: 0 1px 5px #0006;
  transition: box-shadow .15s ease, transform .15s ease;
}
#profile-music-player input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border: 2px solid #e8ddff;
  border-radius: 50%;
  background: #c7aff4;
  box-shadow: 0 1px 5px #0006;
  transition: box-shadow .15s ease, transform .15s ease;
}
#profile-music-player input[type="range"]:is(:hover, :focus-visible, :active):not(:disabled) { --range-color: #cbb2ff; }
#profile-music-player input[type="range"]:is(:hover, :focus-visible, :active):not(:disabled)::-webkit-slider-thumb { box-shadow: 0 0 0 5px #bba1ef24, 0 1px 5px #0006; transform: scale(1.12); }
#profile-music-player input[type="range"]:is(:hover, :focus-visible, :active):not(:disabled)::-moz-range-thumb { box-shadow: 0 0 0 5px #bba1ef24, 0 1px 5px #0006; transform: scale(1.12); }
#profile-music-player input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid #f3eaff; outline-offset: 3px; }
#profile-music-player input[type="range"]:focus-visible::-moz-range-thumb { outline: 2px solid #f3eaff; outline-offset: 3px; }
#profile-music-player input[type="range"]:disabled { opacity: .4; cursor: default; }
#profile-music-player input[type="range"]:disabled::-webkit-slider-thumb { opacity: 0; }
#profile-music-player input[type="range"]:disabled::-moz-range-thumb { opacity: 0; }
@media (pointer: coarse) {
  #profile-music-player input[type="range"] { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  #profile-music-player input[type="range"]::-webkit-slider-thumb { transition: none; }
  #profile-music-player input[type="range"]::-moz-range-thumb { transition: none; }
}
.profile-music-editor{min-width:0;padding:20px;border:1px solid #ffffff14;border-radius:16px;background:#17171e}.profile-music-editor-heading{display:flex;align-items:center;gap:12px}.profile-music-editor-heading h3{margin:0;font-size:16px}.profile-music-editor fieldset{min-width:0;border:0;margin:0;padding:0}.profile-music-editor fieldset:disabled{opacity:.5}.profile-music-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:15px 0}.profile-music-file{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px;background:#ffffff04;border:1px dashed #ffffff25;border-radius:12px;font-size:12px;overflow-wrap:anywhere}.profile-music-file small{font-size:10px;color:#aaa5ba}.profile-music-file input{max-width:100%;min-width:0;font-size:11px;color:#ccc6dc}.profile-music-file input::file-selector-button{border:0;padding:7px 9px;border-radius:7px;background:#393047;color:#eee7fa;cursor:pointer}.profile-music-file img{width:72px;height:72px;object-fit:cover;border-radius:9px}.profile-music-editor .profile-edit-grid{margin-bottom:14px}.profile-music-editor .profile-danger-btn{margin-top:12px}.profile-music-editor [role=status]{font-size:12px;color:#c5e6cf}.profile-music-editor [role=status].is-error,#profile-music-play-status{color:#ffadb8}.profile-music-editor .profile-music-muted a{color:#d5b7fc}
@media(max-width:600px){.profile-music-player{padding:12px;gap:12px;border-radius:14px}.profile-music-art{width:66px;height:66px;align-self:flex-start}.profile-music-kicker{font-size:8px;letter-spacing:.5px;gap:5px}#profile-music-name{font-size:14px}.profile-music-controls{gap:5px}.profile-music-controls button{width:30px;height:30px}.profile-music-editor{padding:14px}.profile-music-upload-grid{grid-template-columns:1fr}.profile-music-kicker span{font-size:7px}}