:root{--bg-primary: #0a0a14;--bg-secondary: #12121f;--bg-card: rgba(20, 20, 35, .7);--bg-card-hover: rgba(28, 28, 48, .8);--bg-input: rgba(255, 255, 255, .05);--bg-input-focus: rgba(255, 255, 255, .08);--text-primary: #f0f0f5;--text-secondary: #9595b0;--text-muted: #5c5c78;--accent-1: #7c5cfc;--accent-2: #5ca0fc;--accent-3: #a35cfc;--gradient-primary: linear-gradient(135deg, var(--accent-1), var(--accent-2));--gradient-accent: linear-gradient(135deg, var(--accent-3), var(--accent-1));--gradient-glow: linear-gradient(135deg, rgba(124, 92, 252, .2), rgba(92, 160, 252, .2));--border-color: rgba(255, 255, 255, .08);--border-focus: rgba(124, 92, 252, .5);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-md: 0 8px 32px rgba(0, 0, 0, .3);--shadow-lg: 0 16px 64px rgba(0, 0, 0, .4);--shadow-glow: 0 0 40px rgba(124, 92, 252, .15);--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-normal: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[hidden]{display:none!important}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}.app{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:var(--space-lg) var(--space-md)}.bg-blob{position:fixed;border-radius:50%;filter:blur(120px);opacity:.4;pointer-events:none;z-index:0;animation:blobFloat 20s ease-in-out infinite}.bg-blob--1{width:500px;height:500px;background:var(--accent-1);top:-150px;left:-100px;animation-delay:0s}.bg-blob--2{width:400px;height:400px;background:var(--accent-2);bottom:-100px;right:-100px;animation-delay:-7s}.bg-blob--3{width:300px;height:300px;background:var(--accent-3);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-14s}@keyframes blobFloat{0%,to{transform:translate(0) scale(1)}25%{transform:translate(30px,-40px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(20px,30px) scale(1.03)}}.bg-blob--3{animation-name:blobFloat3}@keyframes blobFloat3{0%,to{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(calc(-50% + 30px),calc(-50% - 40px)) scale(1.05)}50%{transform:translate(calc(-50% - 20px),calc(-50% + 20px)) scale(.95)}75%{transform:translate(calc(-50% + 20px),calc(-50% + 30px)) scale(1.03)}}.header{position:relative;z-index:1;text-align:center;margin-bottom:var(--space-2xl);animation:fadeInDown .6s ease-out}.header__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--radius-md);background:var(--gradient-primary);color:#fff;margin-bottom:var(--space-md);box-shadow:var(--shadow-glow)}.header__title{font-size:2.25rem;font-weight:700;letter-spacing:-.02em;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-xs)}.header__subtitle{font-size:1rem;color:var(--text-secondary);font-weight:300}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.main{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);width:100%;max-width:900px;animation:fadeInUp .6s ease-out .15s both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.panel{background:var(--bg-card);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border-color);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-normal)}.panel:hover{box-shadow:var(--shadow-lg),var(--shadow-glow)}.panel--controls{display:flex;flex-direction:column;gap:var(--space-lg)}.panel--preview{display:flex;flex-direction:column;gap:var(--space-lg);align-items:center;justify-content:center}.control-group{display:flex;flex-direction:column;gap:var(--space-sm)}.label{display:flex;align-items:center;gap:var(--space-sm);font-size:.85rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.label__icon{display:flex;align-items:center;color:var(--accent-1)}.input{width:100%;padding:var(--space-md) var(--space-lg);background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:.95rem;transition:all var(--transition-fast);outline:none}.input::placeholder{color:var(--text-muted)}.input:hover{background:var(--bg-input-focus);border-color:#ffffff1f}.input:focus{background:var(--bg-input-focus);border-color:var(--border-focus);box-shadow:0 0 0 3px #7c5cfc26}.upload-zone{position:relative;border:2px dashed var(--border-color);border-radius:var(--radius-md);padding:var(--space-lg);text-align:center;cursor:pointer;transition:all var(--transition-fast);overflow:hidden}.upload-zone:hover,.upload-zone--dragover{border-color:var(--accent-1);background:#7c5cfc0d}.upload-zone__content{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm)}.upload-zone__icon{color:var(--text-muted);transition:color var(--transition-fast)}.upload-zone:hover .upload-zone__icon{color:var(--accent-1)}.upload-zone__text{font-size:.85rem;color:var(--text-secondary)}.upload-zone__text strong{color:var(--accent-2)}.upload-zone__hint{font-size:.75rem;color:var(--text-muted)}.upload-zone__preview{position:relative;display:flex;align-items:center;justify-content:center}.upload-zone__preview img{max-width:80px;max-height:80px;border-radius:var(--radius-sm);object-fit:contain}.upload-zone__remove{position:absolute;top:-6px;right:-6px;width:28px;height:28px;border-radius:50%;border:none;background:#ff3c3ccc;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.upload-zone__remove:hover{background:#ff3c3c;transform:scale(1.1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border:none;border-radius:var(--radius-md);font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);outline:none;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(255,255,255,.1),transparent);opacity:0;transition:opacity var(--transition-fast)}.btn:hover:after{opacity:1}.btn--primary{background:var(--gradient-primary);color:#fff;box-shadow:0 4px 16px #7c5cfc4d}.btn--primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #7c5cfc66}.btn--primary:active{transform:translateY(0)}.btn--download{width:100%;background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color)}.btn--download:hover:not(:disabled){background:var(--bg-input-focus);border-color:var(--accent-2);box-shadow:0 0 20px #5ca0fc26}.btn--download:disabled{opacity:.4;cursor:not-allowed}.btn--download:disabled:after{display:none}.preview-area{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;width:100%}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--space-md);color:var(--text-muted);font-size:.9rem;text-align:center;padding:var(--space-xl)}.qr-canvas-wrapper{display:flex;align-items:center;justify-content:center;padding:var(--space-lg);background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-md);animation:scaleIn .3s ease-out}.qr-canvas-wrapper canvas,.qr-canvas-wrapper svg{display:block}@keyframes scaleIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.qr-label{margin-top:var(--space-md);font-size:1rem;font-weight:600;color:var(--text-primary);text-align:center;max-width:280px;word-wrap:break-word;animation:fadeInUp .3s ease-out}.footer{position:relative;z-index:1;margin-top:var(--space-2xl);text-align:center;font-size:.8rem;color:var(--text-muted);animation:fadeInUp .6s ease-out .3s both}@media(max-width:768px){.main{grid-template-columns:1fr;max-width:480px}.header__title{font-size:1.75rem}.panel{padding:var(--space-lg)}}@media(max-width:480px){.app{padding:var(--space-md) var(--space-sm)}.header__title{font-size:1.5rem}.panel{padding:var(--space-md);border-radius:var(--radius-lg)}}