*{margin:0;padding:0;box-sizing:border-box}:root{--primary-blue: #0066cc;--primary-blue-dark: #0052a3;--primary-blue-light: #1a73e8;--accent-cyan: #00aef0;--accent-teal: #00b4a6;--bg-white: #ffffff;--bg-light: #f5f7fa;--bg-gray: #e8ecf1;--bg-dark: #1a1a2e;--text-primary: #1a1a2e;--text-secondary: #5a6b7c;--text-muted: #8a9ba8;--text-white: #ffffff;--gradient-blue: linear-gradient(135deg, #0066cc 0%, #00aef0 100%);--gradient-hero: linear-gradient(135deg, #0d1b2a 0%, #1b263b 50%, #415a77 100%);--gradient-accent: linear-gradient(135deg, #0066cc 0%, #00b4a6 100%);--shadow-sm: 0 2px 8px rgba(0, 102, 204, .08);--shadow-md: 0 4px 16px rgba(0, 102, 204, .12);--shadow-lg: 0 8px 32px rgba(0, 102, 204, .16);--shadow-glow: 0 0 40px rgba(0, 102, 204, .3);--border-light: #e0e6ed;--border-medium: #c5d0e0;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px}body{font-family:Montserrat,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-light);min-height:100vh;color:var(--text-primary);overflow-x:hidden;line-height:1.6}#root{min-height:100vh}@keyframes fadeIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.fade-in{animation:fadeIn .6s ease-out}.fade-in-up{animation:fadeInUp .7s ease-out}.float{animation:float 3s ease-in-out infinite}.app{min-height:100vh;position:relative;padding:48px 24px;background:linear-gradient(180deg,#f5f7fa,#e8ecf1)}.bg-decoration{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:0}.circle{position:absolute;border-radius:50%;background:var(--gradient-blue);opacity:.06;filter:blur(80px)}.circle-1{width:400px;height:400px;top:-100px;right:-100px}.circle-2{width:300px;height:300px;bottom:10%;left:-80px}.circle-3{width:200px;height:200px;top:40%;right:15%;opacity:.04}.header{text-align:center;margin-bottom:48px;position:relative;z-index:1}.logo{display:flex;flex-direction:column;align-items:center;gap:20px;margin-bottom:16px}.logo-image{width:260px;max-width:100%;height:auto}.subtitle{font-size:1.125rem;color:var(--text-secondary);max-width:480px;margin:0 auto;font-weight:400;line-height:1.5}.upload-zone{max-width:680px;margin:0 auto;background:var(--bg-white);border:2px dashed var(--border-medium);border-radius:var(--radius-xl);padding:80px 48px;text-align:center;transition:all .3s ease;position:relative;z-index:1;box-shadow:var(--shadow-sm)}.upload-zone:hover{border-color:var(--primary-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}.upload-zone.drag-active{border-color:var(--accent-cyan);background:#00aef00a;transform:scale(1.01);box-shadow:var(--shadow-glow)}.upload-label{display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:20px}.upload-icon{width:88px;height:88px;color:var(--primary-blue);background:#0066cc14;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.upload-zone:hover .upload-icon{background:#0066cc1f;transform:scale(1.05)}.upload-icon svg{width:40px;height:40px}.upload-text{font-size:1.375rem;font-weight:600;color:var(--text-primary);font-family:Montserrat,sans-serif}.upload-hint{color:var(--text-secondary);font-size:1rem}.upload-formats{font-size:.875rem;color:var(--text-muted);background:var(--bg-light);padding:8px 16px;border-radius:20px;display:inline-block}.editor{max-width:1100px;margin:0 auto;position:relative;z-index:1;animation:fadeInUp .6s ease-out}.editor-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}.editor-grid>.cropper-container{height:fit-content}@media(max-width:950px){.editor-grid{grid-template-columns:1fr}}.cropper-container{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.cropper-wrapper{aspect-ratio:1 / 1;background:#0a0a0f;position:relative}.cropper-wrapper .reactEasyCrop_Container{background:#0a0a0f}.zoom-control{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-light);border-top:1px solid var(--border-light)}.zoom-control svg{width:18px;height:18px;color:var(--text-secondary);flex-shrink:0}.zoom-control input[type=range]{flex:1;height:5px;border-radius:3px;background:var(--border-light);-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer}.zoom-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gradient-blue);cursor:pointer;box-shadow:0 2px 8px #06c6;transition:transform .2s}.zoom-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}.zoom-control input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gradient-blue);cursor:pointer;border:none;box-shadow:0 2px 8px #06c6}.preview-container{aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;background:#f0f2f5;padding:40px}.avatar-preview{max-width:100%;max-height:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transition:transform .3s ease}.avatar-preview:hover{transform:scale(1.02)}.actions-panel{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}.panel-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);transition:all .3s ease}.panel-card:hover{box-shadow:var(--shadow-md)}.panel-card h3{font-size:1.125rem;margin-bottom:10px;font-weight:600;font-family:Montserrat,sans-serif;display:flex;align-items:center;gap:10px;color:var(--text-primary)}.panel-card h3:before{content:"";width:4px;height:22px;background:var(--gradient-blue);border-radius:2px}.panel-card.success{text-align:center;background:#00b4a60f;border-color:#00b4a64d}.panel-card.success h3:before{background:var(--accent-teal)}.success-icon{width:60px;height:60px;margin:0 auto 16px;color:var(--accent-teal);background:#00b4a61f;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:scaleIn .5s ease-out}.success-icon svg{width:30px;height:30px}.panel-info{color:var(--text-secondary);font-size:.9rem;line-height:1.6;margin-top:8px}.file-info{margin-top:18px;padding-top:18px;border-top:1px solid var(--border-light)}.file-name{font-size:.85rem;color:var(--text-muted);word-break:break-all;display:block;background:var(--bg-light);padding:10px 14px;border-radius:var(--radius-sm)}.btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:Montserrat,sans-serif;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn svg{width:20px;height:20px;flex-shrink:0}.btn-primary{background:var(--gradient-blue);color:#fff;box-shadow:0 4px 16px #0066cc4d}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 28px #06c6}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-success{background:linear-gradient(135deg,#00b4a6,#008f85);color:#fff;box-shadow:0 4px 16px #00b4a64d}.btn-success:hover{transform:translateY(-2px);box-shadow:0 8px 28px #00b4a666}.btn-secondary{background:var(--bg-white);color:var(--text-primary);border:1px solid var(--border-medium)}.btn-secondary:hover{background:var(--bg-light);border-color:var(--primary-blue)}.button-group{display:flex;flex-direction:column;gap:12px}.spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}.footer{text-align:center;margin-top:72px;padding-top:36px;border-top:1px solid var(--border-light);color:var(--text-muted);font-size:.875rem;position:relative;z-index:1}.footer p{opacity:.8}@media(max-width:768px){.app{padding:32px 16px}.logo-image{width:200px}.subtitle{font-size:1rem}.upload-zone{padding:60px 24px}.upload-icon{width:72px;height:72px}.upload-icon svg{width:32px;height:32px}.upload-text{font-size:1.2rem}.cropper-wrapper,.preview-container{min-height:320px}.editor-grid{gap:20px}.actions-panel{position:static}}@media(max-width:480px){.btn{padding:14px 20px;font-size:.95rem}}.container{max-width:1200px;margin:0 auto;padding:0 16px}.text-gradient{background:var(--gradient-blue);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-light)}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--primary-blue)}.cropper-area{border:2px solid rgba(255,255,255,.9);box-shadow:0 0 0 9999px #00000080}.reactEasyCrop_CropAreaGrid:before,.reactEasyCrop_CropAreaGrid:after{background:#ffffff4d!important}.reactEasyCrop_GridLines{opacity:.4}.cropper-wrapper{position:relative}.reactEasyCrop_Container{aspect-ratio:1 / 1}