:root{--primary-color:#6366f1;--primary-hover:#4f46e5;--bg-gradient-start:#0f172a;--bg-gradient-end:#1e1b4b;--card-bg:#ffffff0d;--card-border:#ffffff1a;--text-main:#f8fafc;--text-muted:#94a3b8;--checkerboard-color1:#e5e5e5;--checkerboard-color2:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end));color:var(--text-main);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,sans-serif;display:flex;overflow-x:hidden}.app-container{flex-direction:column;gap:2rem;width:100%;max-width:900px;padding:2rem;display:flex}header{text-align:center;animation:.8s ease-out fadeInDown}header h1{background:linear-gradient(90deg,#a855f7,#ec4899);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:2.5rem;font-weight:800}header p{color:var(--text-muted);font-size:1.1rem}main{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:24px;flex-direction:column;justify-content:center;min-height:400px;padding:2.5rem;animation:1s ease-out fadeIn;display:flex;box-shadow:0 25px 50px -12px #00000080}.drop-area{text-align:center;cursor:pointer;background:#ffffff05;border:2px dashed #ffffff4d;border-radius:16px;padding:4rem 2rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.drop-area:hover,.drop-area.dragover{border-color:var(--primary-color);background:#6366f11a;transform:scale(1.02)}.upload-icon{width:64px;height:64px;color:var(--primary-color);margin-bottom:1rem;animation:2s infinite bounce}.drop-text{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.drop-subtext{color:var(--text-muted)}.loading-area{text-align:center;flex-direction:column;align-items:center;gap:1.5rem;display:flex}.spinner{border:4px solid #ffffff1a;border-top-color:var(--primary-color);border-radius:50%;width:60px;height:60px;animation:1s linear infinite spin}.progress-bar{background:#ffffff1a;border-radius:4px;width:100%;max-width:400px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#6366f1,#a855f7);border-radius:4px;width:0%;height:100%;transition:width .3s}.result-area{flex-direction:column;gap:2rem;animation:.5s ease-out fadeIn;display:flex}.comparison-container{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.image-box{flex-direction:column;flex:1;align-items:center;gap:.5rem;min-width:250px;max-width:400px;display:flex}.image-box h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:.9rem}.image-box img{object-fit:contain;border:1px solid var(--card-border);border-radius:12px;width:100%;height:auto;max-height:400px;box-shadow:0 10px 15px -3px #0000004d}.checkerboard img{background-image:linear-gradient(45deg, var(--checkerboard-color1) 25%, transparent 25%), linear-gradient(-45deg, var(--checkerboard-color1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--checkerboard-color1) 75%), linear-gradient(-45deg, transparent 75%, var(--checkerboard-color1) 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;background-color:var(--checkerboard-color2)}.action-buttons{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.btn{cursor:pointer;border:none;border-radius:9999px;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;transition:all .2s;display:inline-flex}.primary-btn{background:var(--primary-color);color:#fff;box-shadow:0 4px 6px -1px #6366f166}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:0 10px 15px -3px #6366f180}.secondary-btn{color:var(--text-main);border:1px solid var(--card-border);background:#ffffff1a}.secondary-btn:hover{background:#fff3}footer{text-align:center;color:var(--text-muted);opacity:.7;font-size:.8rem}.hidden{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-5%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}