/* AB Compare Player — resilient skin */
.abcmp{max-width:520px;margin:18px auto;background:#fff;border:1px solid #e6e6e6;border-radius:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);padding:12px;font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;color:#222}
.abcmp-row{display:flex;align-items:center;gap:10px}

.abcmp-play{all:unset;display:inline-grid;place-items:center;cursor:pointer;width:42px;height:42px;border-radius:999px;background:#222;color:#fff}
.abcmp-play svg{width:20px;height:20px}
.abcmp-hidden{display:none!important}

.abcmp-tog{display:inline-flex;background:#f3f3f3;border:1px solid #ddd;border-radius:999px;overflow:hidden}
.abcmp-tog button{all:unset;padding:6px 12px;cursor:pointer;color:#666;font-weight:600}
.abcmp-tog .abcmp-active{background:#222;color:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

.abcmp-time{margin-left:auto;min-width:50px;text-align:right;color:#666;font-variant-numeric:tabular-nums}

/* Seek slider (hidden on small screens) */
.abcmp-range{margin-top:10px}
.abcmp-seek{width:100%;-webkit-appearance:none;height:4px;border-radius:2px;background:#ddd;outline:none}
.abcmp-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#222;cursor:pointer}
.abcmp-seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#222;cursor:pointer}

/* Trim sliders */
.abcmp-opts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:12px;color:#444}
.abcmp-trim-label{display:flex;flex-direction:column;gap:6px;min-width:220px}
.abcmp-trimA-range,.abcmp-trimB-range{width:100%;-webkit-appearance:none;height:6px;border-radius:3px;background:#eee;outline:none}
.abcmp-trimA-range::-webkit-slider-thumb,.abcmp-trimB-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#222;cursor:pointer}
.abcmp-trimA-range::-moz-range-thumb,.abcmp-trimB-range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#222;cursor:pointer}
.abcmp-trimA-readout,.abcmp-trimB-readout{font-weight:600;color:#222}

/* Mobile: hide seek, show FF/REW */
.abcmp-steps{display:none;gap:8px;margin-top:8px}
.abcmp-step{
  all:unset;cursor:pointer;padding:8px;width:40px;height:40px;border-radius:999px;
  background:#f3f3f3;border:1px solid #ddd;display:inline-grid;place-items:center;color:#222
}
.abcmp-step svg{width:18px;height:18px}
.abcmp-step:active{transform:translateY(1px)}

@media (max-width:600px){
  .abcmp-range{display:none;}
  .abcmp-steps{display:flex;}
}