.enhancer-main-layout { width: 100%; min-height: 300px; position: relative; }
.st-upload-area { border: 2px dashed #cbd5e1; background: #f8fafc; padding: 40px; border-radius: 15px; text-align: center; cursor: pointer; transition: 0.3s; }
.st-upload-area:hover { border-color: #6366f1; background: #eff6ff; }

/* Comparison Slider */
.comparison-container { position: relative; width: 100%; max-width: 800px; margin: 0 auto; height: 450px; overflow: hidden; border-radius: 15px; border: 4px solid #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

.comparison-container img { width: 800px; height: 450px; object-fit: contain; display: block; background: #eee; }
#img-after-box { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; border-right: 2px solid #fff; }
.slider-bar { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: #fff; z-index: 10;  }
.slider-button { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: #6366f1; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); z-index: 11; box-shadow: 0 0 10px rgba(0,0,0,0.3); }
.label-before, .label-after { position: absolute; bottom: 10px; padding: 5px 10px; background: rgba(0,0,0,0.5); color: #fff; font-size: 10px; font-weight: 800; border-radius: 4px; }
.label-before { right: 10px; } .label-after { left: 10px; }

.enhance-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }

.spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #6366f1; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

@media (max-width: 600px) {
    .comparison-container { height: 300px; }
    .comparison-container img { width: 100%; height: 300px; }
      .enhance-controls { grid-template-columns: 1fr; }
}