.febc-modern-audio-wrapper {
      width: 100%;
      max-width: 900px;
      padding: 16px;
      margin: 0 auto;
    }

    .febc-modern-player {
        all: initial;
        display: flex;
        flex-direction: column;
        gap: 12px;
        background: #1e1e1e;
        padding: 16px;
        border-radius: 16px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        font-family: 'Segoe UI', sans-serif;
        color: white;
        box-sizing: border-box;
        width: 100%;
    }

    .febc-modern-play-button {
      width: 100%;
      padding: 16px;
      border: none;
      border-radius: 12px;
      font-size: 20px;
      background: #FE508B;
      color: white;
      cursor: pointer;
    }

    .febc-modern-slider {
      width: 100%;
      appearance: none;
      height: 10px;
      border-radius: 5px;
      background: #444;
      max-width: 100%;
    }

    .febc-modern-slider::-webkit-slider-thumb {
      appearance: none;
      width: 18px;
      height: 18px;
      background: dodgerblue;
      border-radius: 50%;
      cursor: pointer;
      border: none;
      margin-top: -4px;
    }

    .febc-modern-slider::-moz-range-thumb {
      width: 18px;
      height: 18px;
      background: dodgerblue;
      border-radius: 50%;
      cursor: pointer;
      border: none;
    }

    .febc-modern-time-box {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      opacity: 0.8;
      min-width: 80px;
      max-width: 120px;
    }

    .febc-modern-hidden {
      display: none !important;
    }

    @media (min-width: 401px) {
        .febc-modern-audio-wrapper {
        max-width: 100% !important;
        padding: 0;
      }
      .febc-modern-player {
        flex-direction: row;
        align-items: center;
        gap: 20px;
      }

      .febc-modern-play-button {
        flex: 0 0 60px;
        height: 60px;
      }

      .febc-modern-slider.seek-bar {
        flex: 1;
      }

      .febc-modern-time-box {
        flex: 0 0 100px;
      }

      .febc-modern-slider.volume-bar {
        flex: 0 0 120px;
      }

      .febc-modern-player > * {
        margin: 0;
      }
    }

    @media (max-width: 400px) {
      .febc-modern-audio-wrapper {
        max-width: 100% !important;
        padding: 0;
      }

      .febc-modern-player {
        /* border-radius: 0; */
        flex-direction: column;
        align-items: stretch;
      }

      .febc-modern-player > * {
        width: 100%;
        max-width: 100%;
      }
    }