.spinner {
  width: 2.25rem;
  height: 2.25rem;
  border: 3px solid rgba(var(--textSecondary) / 0.15);
  border-top-color: rgba(var(--colorRed));
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.offline-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
  color: rgba(var(--colorOrange));
  flex-shrink: 0;
}
.offline-badge svg {
  display: block;
}

.empty-state-icon {
  font-size: 3rem;
  opacity: 0.5;
}













  button {
    --btn-size-sm:  0.875rem;
    --btn-size-md:  1rem;
    --btn-size-lg:  1.25rem;
    --btn-size-xl:  1.75rem;
    --btn-size-2xl: 2.5rem;
    --btn-font-size: var(--btn-size-md);
    --btn-icon-size: 1em;
    --btn-pad-block: 0.75em;
    --btn-pad-inline: 1.35em;
    --btn-gap: 0.5em;
    --btn-radius: 0.6em;
    --btn-base: oklch(0.55 0.02 260);
    --btn-on:   oklch(0.99 0 0);
    --btn-soft: color-mix(in oklab, var(--btn-base) 14%, transparent);
    --btn-ring: color-mix(in oklab, var(--btn-base) 55%, transparent);
    --btn-dur: 160ms;
    --btn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    font-size: var(--btn-font-size);
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: var(--btn-pad-block) var(--btn-pad-inline);
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--btn-base);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    font-family: inherit;
    position: relative;
    isolation: isolate;
    transition:
      background-color var(--btn-dur) var(--btn-ease),
      border-color     var(--btn-dur) var(--btn-ease),
      color            var(--btn-dur) var(--btn-ease),
      box-shadow       var(--btn-dur) var(--btn-ease),
      transform        var(--btn-dur) var(--btn-ease);
  }

  button[data-size="small"] {
    --btn-font-size: var(--btn-size-sm);
    --btn-pad-inline: 1em;
  }

  button[data-size="medium"] {
    --btn-font-size: var(--btn-size-md);
  }

  button[data-size="large"] {
    --btn-font-size: var(--btn-size-lg);
  }

  button[data-size="xlarge"] {
    --btn-font-size: var(--btn-size-xl);
  }

  button[data-size="xxlarge"] {
    --btn-font-size: var(--btn-size-2xl);
  }

  button[data-shape="square"] {
    --btn-radius: 0;
  }

  button[data-shape="rounded"] {
    --btn-radius: 0.6em;
  }

  button[data-shape="pill"] {
    --btn-radius: 999px;
  }

  button[data-color="primary"] {
    --btn-base: oklch(0.62 0.19 255);
    --btn-on:   oklch(0.99 0 0);
  }

  button[data-color="neutral"] {
    --btn-base: oklch(0.55 0.015 260);
    --btn-on:   oklch(0.99 0 0);
  }

  button[data-color="success"] {
    --btn-base: oklch(0.65 0.16 150);
    --btn-on:   oklch(0.99 0 0);
  }

  button[data-color="warning"] {
    --btn-base: oklch(0.78 0.16 75);
    --btn-on:   oklch(0.20 0.03 75);
  }

  button[data-color="danger"] {
    --btn-base: oklch(0.60 0.22 25);
    --btn-on:   oklch(0.99 0 0);
  }

  button[data-color="info"] {
    --btn-base: oklch(0.68 0.13 220);
    --btn-on:   oklch(0.99 0 0);
  }

  button[data-variant="solid"] {
    background: var(--btn-base);
    color: var(--btn-on);
    border-color: transparent;
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.15);
  }

  button[data-variant="soft"] {
    background: var(--btn-soft);
    color: var(--btn-base);
    border-color: transparent;
  }

  button[data-variant="outline"] {
    background: transparent;
    color: var(--btn-base);
    border-color: color-mix(in oklab, var(--btn-base) 45%, transparent);
  }

  button[data-variant="ghost"] {
    background: transparent;
    color: var(--btn-base);
    border-color: transparent;
  }

  button[data-variant="link"] {
    background: transparent;
    color: var(--btn-base);
    border-color: transparent;
    padding-inline: 0;
    text-underline-offset: 0.25em;
    text-decoration: underline transparent;
    transition: text-decoration-color var(--btn-dur) var(--btn-ease);
  }

  button[data-elevated] {
    box-shadow:
      0 1px 2px oklch(0 0 0 / 0.10),
      0 4px 12px -2px oklch(0 0 0 / 0.15);
  }

  button svg {
    inline-size: var(--btn-icon-size);
    block-size: var(--btn-icon-size);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transition: transform var(--btn-dur) var(--btn-ease);
  }

  button svg[data-fill] {
    fill: currentColor;
    stroke: none;
  }

  button[data-icon="only"] {
    padding: var(--btn-pad-block);
    aspect-ratio: 1;
  }

  button[data-icon="trailing"] {
    flex-direction: row-reverse;
  }

  button[data-full] {
    inline-size: 100%;
  }

  button:not(:disabled, [data-loading]):hover[data-variant="solid"] {
    background: color-mix(in oklab, var(--btn-base) 88%, white);
  }

  button:not(:disabled, [data-loading]):hover[data-variant="soft"] {
    background: color-mix(in oklab, var(--btn-base) 22%, transparent);
  }

  button:not(:disabled, [data-loading]):hover[data-variant="outline"] {
    background: var(--btn-soft);
  }

  button:not(:disabled, [data-loading]):hover[data-variant="ghost"] {
    background: var(--btn-soft);
  }

  button:not(:disabled, [data-loading]):hover[data-variant="link"] {
    text-decoration-color: currentColor;
  }

  button[data-elevated]:not(:disabled, [data-loading]):hover {
    transform: translateY(-1px);
    box-shadow:
      0 2px 4px oklch(0 0 0 / 0.12),
      0 8px 20px -4px oklch(0 0 0 / 0.20);
  }

  button:not(:disabled, [data-loading]):active {
    transform: translateY(0) scale(0.97);
    transition-duration: 60ms;
  }

  button:focus-visible {
    outline: 2px solid var(--btn-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--btn-base) 18%, transparent);
  }

  button:disabled,
  button[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.4);
  }

  button[data-loading] {
    cursor: progress;
    color: transparent !important;
    pointer-events: none;
  }

  button[data-loading]::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 1em;
    block-size: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--btn-on, var(--btn-base));
    animation: btn-spin 0.6s linear infinite;
  }

  button[data-loading][data-variant="soft"]::after,
  button[data-loading][data-variant="outline"]::after,
  button[data-loading][data-variant="ghost"]::after {
    color: var(--btn-base);
  }

  button[data-attention] {
    animation: btn-pulse 2s var(--btn-ease) infinite;
  }

  button:not(:disabled):hover svg[data-anim="bounce"] {
    animation: btn-bounce 400ms var(--btn-ease);
  }

  button:not(:disabled):hover svg[data-anim="spin"] {
    transform: rotate(90deg);
  }

  button:not(:disabled):hover svg[data-anim="slide"] {
    transform: translateX(3px);
  }

  button[data-shake] {
    animation: btn-shake 400ms var(--btn-ease);
  }

  @keyframes btn-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--btn-base) 45%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in oklab, var(--btn-base) 0%, transparent); }
  }

  @keyframes btn-bounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-3px); }
    70%      { transform: translateY(1px); }
  }

  @keyframes btn-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-3px); }
    40%      { transform: translateX(3px); }
    60%      { transform: translateX(-2px); }
    80%      { transform: translateX(2px); }
  }

  @media (prefers-reduced-motion: reduce) {
    button,
    button * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    button:active {
      transform: none;
    }
  }

  @media (prefers-color-scheme: dark) {
    button {
      --btn-soft: color-mix(in oklab, var(--btn-base) 22%, transparent);
    }
    button[data-color="neutral"] {
      --btn-base: oklch(0.72 0.02 260);
      --btn-on:   oklch(0.15 0.01 260);
    }
  }













.heart svg {
  color: #b0b0b0;
  fill: #b0b0b0;
  opacity: 0.15;
  transition: opacity 30s ease, color 0.3s ease;
}
.songItem:hover .heart svg {
  opacity: 0.65;
}
#songsList:hover .heart svg {
  opacity: 0.65;
  transition: opacity 0.45s ease;
/*  animation-delay: 1s;
  animation: fadeOutAll 30s linear forwards;*/
}
.heart.favorited svg {
  color: #ff2d55;
  fill: #ff2d55;
}
@keyframes fadeOutAll {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 0.15;
  }
}






/**
*
*    Copyright © 2 0 2 6
*      MyBeats Music 
*
*
*

  Free to use with anything.
Personal — Business — Anything!

*
*
*      William Cole Hanson
*     Chevrolay@Outlook.com
*        m.me/Chevrolay
*
*
**/