.board-audio-player {
   position: absolute;
   z-index: 900;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   padding: 4px 8px;
   box-sizing: border-box;
   pointer-events: none;
   overflow: hidden;
   user-select: none;
   color: var(--audio-text, #ffffff);
   font-family:
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      sans-serif;
   font-size: 12px;
   width: 280px;
   height: 80px;
}

/* Header */
.board-audio-player .bap-header {
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 22px;
}

.board-audio-player .bap-title {
   flex: 1;
   min-width: 0;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--audio-text, #ffffff);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
   font-size: 10px;
   line-height: 1.25;
   text-align: left;
   cursor: default;
}

/* Progress row */
.board-audio-player .bap-progress-row {
   display: flex;
   align-items: center;
   gap: 8px;
   flex: 1;
   min-height: 0;
}

.board-audio-player .bap-play {
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 6px;
   background: rgba(10, 10, 10, 0.55);
   color: var(--audio-text, #ffffff);
   font-size: 13px;
   cursor: pointer;
   pointer-events: auto;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.board-audio-player .bap-play:hover,
.board-audio-player .bap-play:focus {
   border-color: rgba(255, 255, 255, 0.55);
   outline: none;
}

.board-audio-player .bap-play:focus-visible {
   outline: 2px solid rgba(114, 165, 211, 0.8);
   outline-offset: 2px;
}

.board-audio-player .bap-play:active {
   transform: translateY(1px);
}

.board-audio-player .bap-play.bap-loading {
   position: relative;
   color: transparent;
}

.board-audio-player .bap-play.bap-loading::after {
   content: '';
   position: absolute;
   left: 50%;
   top: 50%;
   width: 14px;
   height: 14px;
   margin-left: -7px;
   margin-top: -7px;
   border: 2px solid rgba(255, 255, 255, 0.3);
   border-top-color: #ffffff;
   border-radius: 50%;
   animation: bap-spin 0.8s linear infinite;
}

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

.board-audio-player .bap-time {
   flex-shrink: 0;
   min-width: 72px;
   text-align: center;
   font-variant-numeric: tabular-nums;
   font-size: 11px;
   color: var(--audio-text, #ffffff);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.board-audio-player .bap-seek-wrap {
   flex: 1;
   position: relative;
   height: 18px;
   display: flex;
   align-items: center;
   pointer-events: auto;
   min-width: 0;
}

.board-audio-player .bap-seek {
   width: 100%;
   margin: 0;
   padding: 0;
   cursor: pointer;
   pointer-events: auto;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   height: 12px;
}

.board-audio-player .bap-seek::-webkit-slider-runnable-track,
.board-audio-player .bap-volume::-webkit-slider-runnable-track {
   width: 100%;
   height: 4px;
   background: linear-gradient(to right, #72a5d3 var(--range-fill, 0%), rgba(255, 255, 255, 0.25) var(--range-fill, 0%));
   border-radius: 2px;
   border: none;
}

.board-audio-player .bap-seek::-webkit-slider-thumb,
.board-audio-player .bap-volume::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #ffffff;
   margin-top: -4px;
   border: none;
   cursor: pointer;
}

.board-audio-player .bap-seek::-moz-range-track,
.board-audio-player .bap-volume::-moz-range-track {
   width: 100%;
   height: 4px;
   background: linear-gradient(to right, #72a5d3 var(--range-fill, 0%), rgba(255, 255, 255, 0.25) var(--range-fill, 0%));
   border-radius: 2px;
   border: none;
}

.board-audio-player .bap-seek::-moz-range-thumb,
.board-audio-player .bap-volume::-moz-range-thumb {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #ffffff;
   border: none;
   cursor: pointer;
}

.board-audio-player .bap-cursors {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
}

.board-audio-player .bap-cursor {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 2px;
   background: currentColor;
   opacity: 0.85;
}

.board-audio-player .bap-cursor::after {
   content: attr(data-name);
   position: absolute;
   top: -16px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 9px;
   white-space: nowrap;
   color: inherit;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.board-audio-player .bap-volume-icon {
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 4px;
   background: rgba(10, 10, 10, 0.55);
   color: var(--audio-text, #ffffff);
   font-size: 10px;
   cursor: pointer;
   pointer-events: auto;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.board-audio-player .bap-volume-icon:hover,
.board-audio-player .bap-volume-icon:focus {
   border-color: rgba(255, 255, 255, 0.55);
   outline: none;
}

.board-audio-player .bap-volume-icon:focus-visible {
   outline: 2px solid rgba(114, 165, 211, 0.8);
   outline-offset: 2px;
}

.board-audio-player .bap-volume-icon:active {
   transform: translateY(1px);
}

.board-audio-player .bap-volume {
   flex-shrink: 0;
   width: 50px;
   min-width: 0;
   cursor: pointer;
   pointer-events: auto;
   -webkit-appearance: none;
   appearance: none;
   background: transparent;
   height: 12px;
   margin: 0;
   padding: 0;
}

.board-audio-player .bap-speed {
   flex-shrink: 0;
   width: auto;
   min-width: 0;
   height: 18px;
   padding: 0 13px 0 3px;
   box-sizing: border-box;
   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 6px;
   background: rgba(10, 10, 10, 0.55);
   color: #ffffff;
   font-size: 10px;
   line-height: 1;
   text-align: right;
   direction: ltr;
   cursor: pointer;
   pointer-events: auto;
   outline: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 3px center;
   background-size: 6px 6px;
}

.board-audio-player .bap-speed:hover,
.board-audio-player .bap-speed:focus {
   border-color: rgba(255, 255, 255, 0.55);
   outline: none;
}

.board-audio-player .bap-speed:focus-visible {
   outline: 2px solid rgba(114, 165, 211, 0.8);
   outline-offset: 2px;
}

.board-audio-player .bap-speed:active {
   transform: translateY(1px);
}

.bap-speed-menu {
   display: flex;
   flex-direction: column;
   min-width: 60px;
   padding: 4px;
   box-sizing: border-box;
   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 6px;
   background: rgba(10, 10, 10, 0.95);
   color: #ffffff;
   font-family:
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      sans-serif;
   font-size: 13px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
   user-select: none;
}

.bap-speed-option {
   padding: 6px 10px;
   border-radius: 4px;
   text-align: center;
   cursor: pointer;
   color: #ffffff;
   background: transparent;
   transition: background 0.1s ease;
   pointer-events: auto;
}

.bap-speed-option:hover,
.bap-speed-option.is-selected {
   background: rgba(255, 255, 255, 0.15);
}

.bap-speed-option.is-anchor {
   font-weight: 600;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 0;
}