.cad-container { width: 100%; max-width: 800px; margin: 20px auto; position: relative; }
.cad-comparison-slider { position: relative; width: 100%; height: 450px; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.cad-comparison-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cad-overlay { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; background-position: center; border-right: 2px solid #fff; }
.cad-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #fff; transform: translateX(-50%); pointer-events: none; z-index: 3; }
.cad-handle::after { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #ec4899; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; border: 3px solid #fff; }
.cad-slider-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 4; }
.cad-label { position: absolute; bottom: 20px; padding: 6px 12px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; pointer-events: none; z-index: 5; }
.cad-label-before { left: 20px; }
.cad-label-after { right: 20px; }
@media (max-width: 768px) {
    .cad-comparison-slider { height: 300px; }
    .cad-handle::after { width: 30px; height: 30px; font-size: 14px; }
}