.ba-slider { position: relative; overflow: hidden; cursor: col-resize; user-select: none; border-radius: 0.5rem; }
.ba-slider img { display: block; width: 100%; height: auto; pointer-events: none; }
.ba-overlay { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; transition: none !important; }
.ba-overlay img { display: block; height: 100%; width: auto; max-width: none; pointer-events: none; transition: none !important; }
.ba-handle { position: absolute; top: 0; width: 3px; height: 100%; background: var(--brand-purple); cursor: col-resize; z-index: 10; transition: none !important; }
.ba-handle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: var(--brand-purple); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.ba-handle::before { content: '◀ ▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 10px; z-index: 11; letter-spacing: 2px; white-space: nowrap; }
.ba-label { position: absolute; top: 8px; padding: 2px 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; border-radius: 4px; z-index: 5; }
.ba-label-left { left: 8px; }
.ba-label-right { right: 8px; }