:root {
  --abcp-bg: #333333;
  --abcp-radius: 8px;

  --abcp-title-size: 18px;
  --abcp-title-color: #dddddd;

  --abcp-btn-bg: #7d1f1f;
  --abcp-btn-text: #ffffff;
  --abcp-btn-fs: 14px;

  --abcp-btn-hover-bg: #a62828;
  --abcp-btn-hover-text: #ffffff;

  --abcp-btn-active-bg: #c93c3c;
  --abcp-btn-active-text: #ffffff;

  --abcp-play-size: 40px;
  --abcp-play-bg: #7d1f1f;

  --abcp-icon-size: 18px;
  --abcp-play-icon: #ffffff;

  --abcp-play-hover-bg: #a62828;
  --abcp-play-hover-icon: #ffffff;

  --abcp-play-active-bg: #c93c3c;
  --abcp-play-active-icon: #ffffff;

  --abcp-play-pressed-bg: #5a0f0f;
  --abcp-play-pressed-icon: #ffffff;

  --abcp-seek-bg: #555555;
  --abcp-seek-thumb: #ffffff;
  --abcp-seek-thumb-hover: #dddddd;

  --abcp-time-size: 14px;
  --abcp-time-color: #cccccc;
}

/* Player */
.abcp-player{
  background: var(--abcp-bg);
  padding:20px;
  border-radius: var(--abcp-radius);
  color:#eee;
  max-width:480px;
  font-family:system-ui,Inter,-apple-system,BlinkMacSystemFont;
  margin-bottom:20px;
}

.abcp-title{
  font-size: var(--abcp-title-size);
  color: var(--abcp-title-color);
  margin-bottom:10px;
  opacity:0.9;
}

/* A/B Buttons */
.abcp-ab-buttons{
  display:flex;
  gap:10px;
  margin-bottom:16px;
}

.abcp-ab-btn{
  flex:1;
  padding:10px 0;
  border-radius: var(--abcp-radius);
  border:1px solid #333;
  background: var(--abcp-btn-bg);
  color: var(--abcp-btn-text);
  cursor:pointer;
  font-size: var(--abcp-btn-fs);
  transition:0.2s;
  text-align:center;
}

.abcp-ab-btn.active{
  background: var(--abcp-btn-active-bg);
  color: var(--abcp-btn-active-text);
  border-color: var(--abcp-btn-active-bg);
  font-weight:600;
}

.abcp-ab-btn:hover{
  background: var(--abcp-btn-hover-bg);
  color: var(--abcp-btn-hover-text);
}

/* Main Row */
.abcp-main{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Play Button */
.abcp-play{
  width: var(--abcp-play-size);
  height: var(--abcp-play-size);
  border-radius:50%;
  border:none;
  background: var(--abcp-play-bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
}

/* SVG Icon */
.abcp-player .abcp-play svg{
    width: var(--abcp-icon-size) !important;
    height: var(--abcp-icon-size) !important;
    min-width: var(--abcp-icon-size) !important;
    min-height: var(--abcp-icon-size) !important;
    fill: var(--abcp-play-icon) !important;
    flex-shrink:0 !important;
    display:block !important;
}

/* Hover */
.abcp-play:hover{
  background: var(--abcp-play-hover-bg);
}
.abcp-play:hover svg{
  fill: var(--abcp-play-hover-icon);
}

/* Active (Playing) */
.abcp-play.is-playing{
  background: var(--abcp-play-active-bg) !important;
}
.abcp-play.is-playing svg{
  fill: var(--abcp-play-active-icon) !important;
}

/* Pressed */
.abcp-play:active:not(.is-playing),
.abcp-play:focus:not(.is-playing),
.abcp-play:focus-visible:not(.is-playing){
  background: var(--abcp-play-pressed-bg) !important;
  outline:none !important;
  box-shadow:none !important;
}
.abcp-play:active:not(.is-playing) svg,
.abcp-play:focus:not(.is-playing) svg,
.abcp-play:focus-visible:not(.is-playing) svg{
  fill: var(--abcp-play-pressed-icon) !important;
}

/* Seek Bar */
.abcp-seek{
  flex:1;
  height:4px;
  background: var(--abcp-seek-bg);
  border-radius:2px;
  appearance:none;
}

.abcp-seek::-webkit-slider-thumb{
  appearance:none;
  width:12px;
  height:12px;
  background: var(--abcp-seek-thumb);
  border-radius:50%;
  transition:0.2s;
}
.abcp-seek::-webkit-slider-thumb:hover{
  background: var(--abcp-seek-thumb-hover);
}

/* Time */
.abcp-time{
  font-size: var(--abcp-time-size);
  color: var(--abcp-time-color);
  min-width:80px;
  text-align:right;
}

/* Text Color Fix */
.abcp-player,
.abcp-player * {
    color: inherit !important;
}

.abcp-player .abcp-title {
    color: var(--abcp-title-color) !important;
}

.abcp-player .abcp-time {
    color: var(--abcp-time-color) !important;
}

.abcp-player .abcp-ab-btn.active {
    color: var(--abcp-btn-active-text) !important;
}