:root{--bg-primary:#0a0a0a;--bg-surface:#141414;--bg-surface-2:#1e1e1e;--bg-surface-3:#282828;--accent:#7c3aed;--accent-hover:#6d28d9;--accent-glow:#7c3aed4d;--text-primary:#f5f5f5;--text-secondary:#a0a0a0;--text-muted:#666;--border:#2a2a2a;--border-hover:#3a3a3a;--success:#22c55e;--error:#ef4444;--radius:12px;--radius-sm:8px;--transition:.2s ease}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6}.header{text-align:center;padding:2.5rem 1rem 1.5rem}.header h1{letter-spacing:-.02em;font-size:1.75rem;font-weight:700}.header h1 span{color:var(--accent)}.header p{color:var(--text-secondary);margin-top:.35rem;font-size:.9rem}.container{max-width:960px;margin:0 auto;padding:0 1.25rem 3rem}.main-grid{grid-template-columns:1fr 1fr;align-items:start;gap:1.5rem;display:grid}.main-grid>.card{min-width:0}.tabs{background:var(--bg-surface);border-radius:var(--radius);gap:.25rem;margin-bottom:1.5rem;padding:.25rem;display:flex}.tab-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;border:none;flex:1;padding:.65rem 1rem;font-size:.85rem;font-weight:500}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow)}.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.input-panel{flex-direction:column;gap:1rem;display:flex}.text-input-group{flex-direction:column;gap:.75rem;display:flex}.text-input-group label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:500}.text-input-group textarea{background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;min-height:120px;color:var(--text-primary);resize:vertical;transition:border-color var(--transition);padding:.85rem;font-family:inherit;font-size:.9rem}.text-input-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);outline:none}.text-input-group textarea::placeholder{color:var(--text-muted)}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;transition:all var(--transition);padding:2.5rem 1.5rem;position:relative}.drop-zone:hover,.drop-zone.dragover{border-color:var(--accent);background:#7c3aed0d}.drop-zone.dragover{box-shadow:0 0 20px var(--accent-glow);transform:scale(1.01)}.drop-zone-icon{opacity:.7;margin-bottom:.75rem;font-size:2.5rem}.drop-zone-text{color:var(--text-secondary);font-size:.9rem}.drop-zone-text strong{color:var(--accent)}.drop-zone-hint{color:var(--text-muted);margin-top:.5rem;font-size:.75rem}.drop-zone input[type=file]{display:none}.upload-status{background:var(--bg-surface-2);border-radius:var(--radius-sm);align-items:center;gap:.75rem;padding:.75rem 1rem;font-size:.85rem;display:none}.upload-status.visible{display:flex}.upload-status .filename{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.upload-status .status-icon{font-size:1.1rem}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.logo-upload{border-top:1px solid var(--border);flex-direction:column;gap:.5rem;padding-top:1rem;display:flex}.logo-upload-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:500}.logo-preview{align-items:center;gap:.75rem;display:flex}.logo-preview img{object-fit:contain;background:var(--bg-surface-2);border:1px solid var(--border);border-radius:4px;width:40px;height:40px}.logo-remove-btn{border:1px solid var(--border);background:var(--bg-surface-2);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-radius:6px;justify-content:center;align-items:center;font-size:1.1rem;line-height:1;display:flex}.logo-remove-btn:hover{border-color:var(--error);color:var(--error);background:#ef44441a}.logo-upload-btn{border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;align-self:flex-start;padding:.5rem 1rem;font-size:.82rem}.logo-upload-btn:hover{border-color:var(--accent);color:var(--accent)}.btn-generate{border-radius:var(--radius-sm);background:var(--accent);color:#fff;cursor:pointer;width:100%;transition:all var(--transition);border:none;padding:.75rem;font-size:.9rem;font-weight:600}.btn-generate:hover{background:var(--accent-hover);box-shadow:0 4px 12px var(--accent-glow)}.btn-generate:active{transform:scale(.98)}.btn-generate:disabled{opacity:.5;cursor:not-allowed}.output-panel{flex-direction:column;align-items:center;gap:1.25rem;display:flex}.qr-placeholder{width:100%;min-height:280px;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;font-size:.85rem;display:flex}.qr-placeholder-icon{opacity:.4;font-size:3rem}.qr-display{flex-direction:column;align-items:center;gap:1.25rem;width:100%;display:none}.qr-display.visible{display:flex}.qr-image-wrapper{border-radius:var(--radius);background:#fff;padding:1.25rem;display:inline-flex;box-shadow:0 4px 20px #0000004d}.qr-image-wrapper img{width:220px;height:220px;image-rendering:pixelated;display:block}.qr-filename{color:var(--text-primary);text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;font-weight:600;overflow:hidden}.qr-url{background:var(--bg-surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;text-align:center;cursor:pointer;transition:border-color var(--transition);padding:.6rem .85rem;font-family:SF Mono,Fira Code,monospace;font-size:.78rem;overflow:hidden}.qr-url:hover{border-color:var(--accent);color:var(--text-primary)}.qr-actions{gap:.5rem;width:100%;display:flex}.btn-action{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface-2);color:var(--text-primary);cursor:pointer;transition:all var(--transition);flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.6rem .75rem;font-size:.8rem;font-weight:500;display:flex}.btn-action:hover{border-color:var(--accent);background:var(--bg-surface-3)}.btn-action.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-action.primary:hover{background:var(--accent-hover)}.toast{background:var(--bg-surface-3);color:var(--text-primary);border-radius:var(--radius-sm);border:1px solid var(--border);opacity:0;z-index:1000;pointer-events:none;padding:.65rem 1.25rem;font-size:.85rem;transition:all .3s;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)translateY(100px);box-shadow:0 4px 20px #0006}.toast.visible{opacity:1;transform:translate(-50%)translateY(0)}@media (width<=700px){.main-grid{grid-template-columns:1fr}.header{padding:1.5rem 1rem 1rem}.header h1{font-size:1.35rem}.qr-image-wrapper img{width:180px;height:180px}}