@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap";:root{--bg-deep:#070913;--bg-dark:#0d1127;--text-primary:#f3f4f6;--text-secondary:#9ca3af;--text-muted:#6b7280;--primary:#8b5cf6;--primary-hover:#7c3aed;--primary-glow:#8b5cf666;--secondary:#ec4899;--secondary-glow:#ec489966;--accent:#10b981;--accent-glow:#10b9814d;--danger:#ef4444;--white:#fff;--glass-bg:#ffffff08;--glass-border:#ffffff12;--glass-shadow:#00000080;--glass-glow:#8b5cf614;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-heading:"Outfit", "Inter", system-ui, -apple-system, sans-serif;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce:all .5s cubic-bezier(.175, .885, .32, 1.275)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-deep);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-image:radial-gradient(circle at 10% 20%,#8b5cf626 0%,#0000 40%),radial-gradient(circle at 90% 80%,#ec48991f 0%,#0000 40%),radial-gradient(circle,#070913 0%,#070913e6 100%);background-attachment:fixed;min-height:100vh;position:relative;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary)}#root{flex-direction:column;min-height:100vh;display:flex}.container{flex-direction:column;flex:1;width:100%;max-width:1280px;margin:0 auto;padding:0 24px;display:flex}.app-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;margin-bottom:32px;padding:24px 0;display:flex}.logo{font-family:var(--font-heading);letter-spacing:-.5px;background:linear-gradient(135deg, var(--white) 30%, var(--primary) 70%, var(--secondary) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:8px;font-size:24px;font-weight:800;display:flex}.logo-icon{color:var(--primary);filter:drop-shadow(0 0 8px var(--primary-glow))}.badge-new{background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color:var(--white);border-radius:99px;padding:2px 8px;font-size:11px;font-weight:600}.hero-section{text-align:center;margin-bottom:40px;animation:.8s ease-out fadeIn}.hero-title{font-family:var(--font-heading);letter-spacing:-1.5px;margin-bottom:16px;font-size:54px;font-weight:800;line-height:1.1}.hero-title span{background:linear-gradient(135deg,#a78bfa 0%,#ec4899 50%,#f43f5e 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text}.hero-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto;font-size:18px;line-height:1.6}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px var(--glass-shadow);transition:var(--transition-smooth);border-radius:20px;position:relative;overflow:hidden}.glass-panel:before{content:"";background:radial-gradient(circle at top right, var(--glass-glow), transparent 60%);pointer-events:none;z-index:0;position:absolute;inset:0}.app-grid{grid-template-columns:1fr;align-items:start;gap:32px;margin-bottom:48px;display:grid}@media (width>=1024px){.app-grid{grid-template-columns:7fr 5fr}}.upload-container{text-align:center;cursor:pointer;min-height:450px;transition:var(--transition-smooth);background:#ffffff03;border:2px dashed #ffffff1a;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;padding:40px;display:flex}.upload-container:hover,.upload-container.drag-active{border-color:var(--primary);background:#8b5cf608;box-shadow:0 0 20px #8b5cf61a}.upload-icon-wrapper{border:1px solid var(--glass-border);width:80px;height:80px;color:var(--primary);transition:var(--transition-bounce);background:#ffffff08;border-radius:50%;justify-content:center;align-items:center;margin-bottom:24px;display:flex}.upload-container:hover .upload-icon-wrapper{color:var(--white);background:var(--primary);box-shadow:0 0 15px var(--primary-glow);transform:scale(1.1)rotate(5deg)}.upload-title{font-family:var(--font-heading);margin-bottom:8px;font-size:20px;font-weight:600}.upload-hint{color:var(--text-secondary);margin-bottom:24px;font-size:14px}.examples-wrapper{z-index:1;width:100%;max-width:440px}.examples-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:12px;font-size:12px;font-weight:600}.examples-grid{justify-content:center;gap:16px;display:flex}.example-card{border:2px solid var(--glass-border);cursor:pointer;width:72px;height:72px;transition:var(--transition-bounce);border-radius:12px;position:relative;overflow:hidden}.example-card:hover{border-color:var(--primary);box-shadow:0 0 10px var(--primary-glow);transform:scale(1.08)}.example-card img{object-fit:cover;width:100%;height:100%}.loading-wrapper{flex-direction:column;justify-content:center;align-items:center;min-height:450px;padding:48px;display:flex}.scanner-box{border:1px solid var(--glass-border);border-radius:16px;width:240px;height:240px;margin-bottom:32px;position:relative;overflow:hidden;box-shadow:0 0 30px #0000004d}.scanner-box img{object-fit:cover;filter:brightness(.6);width:100%;height:100%}.scanner-line{background:linear-gradient(to right, transparent, var(--primary), var(--secondary), var(--primary), transparent);width:100%;height:4px;box-shadow:0 0 12px var(--primary);z-index:2;animation:2s linear infinite scan;position:absolute;top:0;left:0}.pulse-glow{background:radial-gradient(circle,#8b5cf61a 0%,#0000 70%);width:100%;height:100%;animation:2s ease-in-out infinite pulse;position:absolute;top:0;left:0}.loading-title{font-family:var(--font-heading);margin-bottom:12px;font-size:20px;font-weight:600}.progress-bar-outer{border:1px solid var(--glass-border);background:#ffffff0d;border-radius:99px;width:300px;height:6px;margin-bottom:8px;overflow:hidden}.progress-bar-inner{background:linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);width:0%;height:100%;box-shadow:0 0 10px var(--primary-glow);transition:width .1s}.loading-text{color:var(--text-secondary);font-size:14px}.compare-container{aspect-ratio:4/3;-webkit-user-select:none;user-select:none;border:1px solid var(--glass-border);background:#111;border-radius:16px;width:100%;position:relative;overflow:hidden}.compare-img{object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.compare-overlay{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.checkerboard{background-color:#1e1e1e;background-image:linear-gradient(45deg,#151515 25%,#0000 25%),linear-gradient(-45deg,#151515 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#151515 75%),linear-gradient(-45deg,#0000 75%,#151515 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.compare-handle{background-color:var(--white);cursor:ew-resize;z-index:10;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 10px #00000080}.compare-handle-button{background:var(--white);width:40px;height:40px;color:var(--bg-deep);border:2px solid var(--primary);pointer-events:none;border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 15px #0000004d}.compare-label{color:var(--white);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--glass-border);z-index:5;background:#0009;border-radius:6px;padding:6px 12px;font-size:12px;font-weight:500;position:absolute;top:16px}.compare-label.left{left:16px}.compare-label.right{right:16px}.canvas-container-outer{aspect-ratio:4/3;border:1px solid var(--glass-border);background:#111;border-radius:16px;width:100%;position:relative;overflow:hidden}.canvas-element{object-fit:contain;cursor:grab;width:100%;height:100%;display:block}.canvas-element:active{cursor:grabbing}.canvas-instructions{color:var(--text-secondary);pointer-events:none;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;border-radius:99px;align-items:center;gap:6px;padding:6px 16px;font-size:12px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.panel-wrapper{flex-direction:column;gap:24px;padding:24px;display:flex}.tabs-header{border:1px solid var(--glass-border);background:#ffffff08;border-radius:12px;padding:4px;display:flex}.tab-btn{color:var(--text-secondary);font-family:var(--font-heading);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:14px;font-weight:600;display:flex}.tab-btn.active{background:var(--primary);color:var(--white);box-shadow:0 4px 12px var(--primary-glow)}.panel-section{flex-direction:column;gap:16px;display:flex}.panel-title{font-family:var(--font-heading);align-items:center;gap:8px;font-size:16px;font-weight:600;display:flex}.bg-choices-grid{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.bg-choice-item{aspect-ratio:1;border:2px solid var(--glass-border);cursor:pointer;transition:var(--transition-bounce);border-radius:10px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.bg-choice-item:hover,.bg-choice-item.active{border-color:var(--primary);box-shadow:0 0 10px var(--primary-glow);transform:scale(1.05)}.bg-choice-item img{object-fit:cover;width:100%;height:100%}.bg-choice-custom{color:var(--text-secondary);background:#ffffff05;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:12px;display:flex}.bg-choice-custom input[type=file]{display:none}.slider-group{flex-direction:column;gap:6px;display:flex}.slider-info{justify-content:space-between;font-size:13px;display:flex}.slider-label{color:var(--text-secondary)}.slider-value{color:var(--text-primary);font-weight:600}input[type=range]{-webkit-appearance:none;width:100%;height:6px;transition:var(--transition-smooth);background:#ffffff14;border-radius:99px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--primary);cursor:pointer;width:16px;height:16px;box-shadow:0 0 8px var(--primary-glow);transition:var(--transition-bounce);border-radius:50%}input[type=range]::-webkit-slider-thumb:hover{background:var(--white);transform:scale(1.2)}.btn{font-family:var(--font-heading);cursor:pointer;transition:var(--transition-bounce);border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:15px;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);color:var(--white);box-shadow:0 4px 15px var(--primary-glow)}.btn-primary:hover{box-shadow:0 6px 20px var(--primary-glow), 0 0 10px var(--secondary-glow);transform:translateY(-2px)}.btn-secondary{border:1px solid var(--glass-border);color:var(--text-primary);background:#ffffff0d}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px)}.btn-danger{color:#f87171;background:#ef444426;border:1px solid #ef44444d}.btn-danger:hover{background:var(--danger);color:var(--white);transform:translateY(-2px);box-shadow:0 4px 15px #ef444466}.buttons-row{gap:16px;display:flex}.buttons-row .btn{flex:1}.app-footer{border-top:1px solid var(--glass-border);text-align:center;color:var(--text-muted);margin-top:auto;padding:40px 0;font-size:14px}.app-footer p{justify-content:center;align-items:center;gap:6px;display:flex}.heart-icon{color:var(--secondary);animation:1.5s infinite heartbeat}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes scan{0%{top:0%}50%{top:100%}to{top:0%}}@keyframes pulse{0%,to{opacity:.5;transform:scale(.95)}50%{opacity:.8;transform:scale(1.05)}}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}@media (width<=640px){.hero-title{font-size:38px}.app-header,.buttons-row{flex-direction:column;gap:12px}.bg-choices-grid{grid-template-columns:repeat(3,1fr)}}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100000;background:#000000bf;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out modalFadeIn;display:flex;position:fixed;top:0;left:0}.modal-box{background:var(--bg-dark);border:1px solid var(--glass-border);text-align:center;border-radius:20px;width:90%;max-width:460px;padding:32px;animation:.3s cubic-bezier(.175,.885,.32,1.275) modalScaleIn;box-shadow:0 20px 50px #0009}.modal-title-row{font-family:var(--font-heading);color:var(--white);justify-content:center;align-items:center;gap:10px;margin-bottom:16px;font-size:20px;font-weight:700;display:flex}.modal-text{color:var(--text-secondary);margin-bottom:28px;font-size:15px;line-height:1.6}.modal-buttons{gap:16px;display:flex}.modal-buttons .btn{flex:1}.fullscreen-loading{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:99999;background:#070913f7;flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}