body {
   background: linear-gradient(135deg, #0d6efd, #6610f2);
   min-height: 100vh;
 }

 .card {
   width: 100%;
   max-width: 820px;
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0,0,0,0.2);
 }
.compare-container {
   position: relative;
   width: 100%;
   overflow: hidden;
   border-radius: 12px;
   margin-top: 16px;
   user-select: none;
 }

 .compare-container img {
   width: 100%;
   height: auto;
   display: block;
 }

 /* Imagem base (original) */
 .before-image {
   position: relative;
   z-index: 1;
 }

 /* Imagem de cima (restaurada) */
 .after-image {
   position: absolute;
   inset: 0;
   z-index: 2;
   overflow: hidden;
   clip-path: inset(0 0 0 50%);
 }

 .after-image img {
   width: 100%;
   height: auto;
 }

 /* Linha do slider */
 .slider {
   position: absolute;
   top: 0;
   left: 50%;
   width: 3px;
   height: 100%;
   background: black;
   z-index: 3;
   transform: translateX(-50%);
   cursor: ew-resize;
 }

 /* Botão do slider */
 .slider::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 22px;
   height: 22px;
   background: black;
   border: 2px solid white;
   border-radius: 50%;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 8px rgba(0,0,0,0.4);
 }

 .label {
   position: absolute;
   top: 10px;
   padding: 4px 10px;
   font-size: 12px;
   border-radius: 12px;
   color: white;
   z-index: 4;
 }

 .label.before {
   left: 10px;
   background: rgba(0,0,0,0.6);
 }

 .label.after {
   right: 10px;
   background: rgba(25,135,84,0.9);
 }

 .video-result {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.video-result video {
  width: 100%;
  max-height: 480px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}