:root{--primary-color: #3498db;--primary-hover: #2980b9;--success-color: #2ecc71;--success-hover: #27ae60;--text-color: #333;--text-light: #555;--text-muted: #666;--border-color: #ccc;--background-light: #ecf0f1;--white: #fff;--disabled-hover: #7f8c8d;--spacing-xs: .5rem;--spacing-sm: .75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--border-radius-sm: 4px;--border-radius-md: 8px;--border-radius-lg: 10px;--transition-speed: .3s}html,body{overflow-x:hidden;width:100%;max-width:100%;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;background-color:var(--white);color:var(--text-color);position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{width:95%;max-width:1200px;margin:var(--spacing-xs) auto;padding:var(--spacing-sm);background-color:var(--white);border-radius:0;box-shadow:none;overflow-x:hidden;min-height:calc(100vh - 2 * var(--spacing-xs));display:flex;flex-direction:column}@media (min-width: 768px){.container{margin:var(--spacing-xl) auto;padding:var(--spacing-xl);min-height:calc(100vh - 2 * var(--spacing-xl))}}h1{text-align:center;color:#2c3e50;margin-bottom:var(--spacing-xl)}h2{color:#2c3e50;margin-top:var(--spacing-xl)}.upload-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);width:100%;padding:0 10px;box-sizing:border-box}.dropzone{width:100%;max-width:600px;border:2px dashed var(--border-color);border-radius:var(--border-radius-lg);padding:40px 20px;text-align:center;cursor:pointer;transition:all var(--transition-speed);box-sizing:border-box;-webkit-tap-highlight-color:transparent}.dropzone:hover{border-color:var(--primary-color)}.dropzone.highlight{border-color:var(--primary-color);background-color:#3498db0d}.file-icon{width:60px;height:60px;margin:0 auto 15px;color:#95a5a6}.drop-text{font-size:1.2rem;margin-bottom:var(--spacing-md);color:var(--text-color)}.file-info{font-size:.9rem;color:var(--text-muted);margin-bottom:var(--spacing-xl)}#file-input{display:none}.upload-btn{padding:12px 30px;background-color:var(--primary-color);color:var(--white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-size:1rem;transition:all var(--transition-speed);position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;min-width:200px}.upload-btn:hover:not(:disabled){background-color:var(--primary-hover)}.upload-btn:disabled{cursor:not-allowed;opacity:.8}.upload-btn:disabled:hover{background-color:var(--disabled-hover)}.upload-btn.loading:after{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:var(--white);animation:spin 1s linear infinite}.image-preview{margin-top:var(--spacing-xl);display:none;flex-direction:column;align-items:center;gap:var(--spacing-md)}.preview-card{width:100%;max-width:600px;background-color:var(--background-light);border-radius:var(--border-radius-md);overflow:hidden;padding:0;box-shadow:0 2px 4px #0000001a}.image-container{width:100%;height:300px;display:flex;justify-content:center;align-items:center;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.image-container img{max-width:100%;max-height:100%;object-fit:contain;display:none}.download-btn{display:inline-block;width:auto;padding:10px 30px;margin-top:var(--spacing-xs);background-color:var(--success-color);color:var(--white);border:none;border-radius:var(--border-radius-sm);cursor:pointer;font-size:1rem;transition:background-color var(--transition-speed);text-align:center;text-decoration:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.download-btn:hover{background-color:var(--success-hover)}.promo-text{font-size:.85rem;color:var(--text-muted);margin-top:var(--spacing-md);text-align:center}.promo-text a{color:#8e1fdc;text-decoration:none;transition:color var(--transition-speed)}.promo-text a:hover{text-decoration:underline}.footer-text{text-align:center;margin-top:calc(var(--spacing-xl) * 2);padding-top:var(--spacing-xl);padding-bottom:0;margin-bottom:0;font-size:.9rem;color:var(--text-muted)}.footer-text a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-speed)}.footer-text a:hover{color:var(--primary-hover);text-decoration:underline}@keyframes spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}@media (max-width: 480px){.container{padding:var(--spacing-sm)}.drop-text{font-size:1rem}.file-info{font-size:.8rem}.upload-btn,.download-btn{padding:12px 20px}}